H5制作显示轮播图的方法Swiper

1、需要引入Swiper插件

 <!-- swiper插件 -->
 <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
 <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
 <script src="https://unpkg.com/swiper/js/swiper.js"> </script>
 <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

 

2、轮播图的html结构

 <div class="swiper-container">
      <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,index) in swiperImgList">
                      <img :src="item" alt="">
              </div>
      </div>
      <div class="swiper-pagination"></div> 
  </div>

.swiper-pagination-bullet {  // 小圆点未激活的css
    background: #fff !important;
    opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {  //小圆点激活的样式
    background: #fff !important;
    opacity: 1 !important;
}

3、js代码如下

initSwiper() {
      var mySwiper = new Swiper('.swiper-container', {
            speed: 1000,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false   //手动滑动后，继续自动滑动
            },
            pagination: {
              el: '.swiper-pagination',
            }, 
            loop: true
   })
},

 

如上。