npm install vue-awesome-swiper //版本 4.1.1
//在main.js中 切记要对应好版本，不然引入的路径可能不一样
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'
Vue.use(VueAwesomeSwiper)
//template内部
<div>
<swiper ref="mySwiper" :options="swiperOption">
<!-- 渲染的图片 -->
<swiper-slide v-for="(item,index) in items" :key="index">
<img width="100%" height="100%" :large="item.parentSrc" preview="index" :src="item.imageSrc" alt="">
</swiper-slide>
<!-- 这是轮播的小圆点 -->
</swiper>
<div id="prev" slot="button-prev" class="swiper-button-prev" />
<div id="next" slot="button-next" class="swiper-button-next" />
</div>
js：//一个页面有多个轮播 就设置多个swiperOption
swiperOption1: {
autoplay: { disableOnInteraction: false }, // 主要处理点击以后不轮播的bug
loop: false,
slidesPerView: 4,
spaceBetween: 20,
speed: 800,
// 用户操作swiper之后，是否禁止autoplay.默认为true：停止。
autoplayDisableOnInteraction: false,
// 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
preventLinksPropagation: true,
// 设置点击箭头
navigation: {
nextEl: '#next',
prevEl: '#prev'
}
},
swiperOption2: {
autoplay: { disableOnInteraction: false }, // 主要处理点击以后不轮播的bug
loop: false,
delay: 2000,
slidesPerView: 3,
spaceBetween: 20,
speed: 1000,
// 用户操作swiper之后，是否禁止autoplay.默认为true：停止。
autoplayDisableOnInteraction: false,
// 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
preventLinksPropagation: true,
// 设置点击箭头
navigation: {
nextEl: '#next1',
prevEl: '#prev1'
}, on: {
slideChangeTransitionStart: function() {
console.log(this.activeIndex)
// 播放警报
// if (_this.warningItems[this.activeIndex].new) {
// setTimeout(() => {
// _this.$refs.playBtn.click()
// }, 6000)
// }
}
}
},