1、需要引入Swiper插件
<!-- swiper插件 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css" rel="external nofollow" >
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" rel="external nofollow" >
<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
})
},
如上。