仿淘宝商品详情页图片滑动并且数字也跟着变化

今天遇到需求需要做个淘宝那样的商品详情页如图（这里只差放图片了）支持移动端，当然用的是swiper.js支持左右滑动

上代码
html代码

<div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">Slide 1</div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
              <div class="swiper-slide">Slide 4</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
  </div>

css代码

.swiper-pagination-fraction,
.swiper-pagination-custom,
 .swiper-container-horizontal > .swiper-pagination-bullets {
 bottom: 10px;
 left: 0;
 width: 100%;
}
 .swiper-pagination {
   position: absolute;
   text-align: center;
   transition: 300ms opacity;
   transform: translate3d(0, 0, 0);
   z-index: 10;
 }
     .swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   position: relative;
   transition-property: transform;
 }
   .swiper-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 1;
     display: flex;
     transition-property: transform;
     box-sizing: content-box;
 }

 .swiper-container {
   width: 100%;
   height: 500px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   overflow: hidden;
   list-style: none;
   padding: 0;
   z-index: 1;
}
 .swiper-slide {
   text-align: center;
   font-size: 18px;
   background: red;

   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
 }

js代码，记得引入swiper.min.js文件自己去官网下吧，我用的5版本

<script src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
    });

上面这些代码只需要ctrl+c就能做出更我一样的效果，记得点赞，谢谢啦