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

时间：2024-04-17 07:57:41

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
   })
},

 

如上。

相关文章