版本:“vue-awesome-swiper”: “4.1.1”,“swiper”: “5.4.5”
我的方法是两个轮播存在,一个展示,另一个多个展示,主要使用slideTo方法联动
大图的轮播:
<div v-swiper:mySwiper="swiperOption" class="swiper-container" style="width: 100%;height: 100%;" ref="mySwiper1">
<div class="swiper-wrapper">
<div class="banner swiper-slide" v-for="(item, index) in bannerList" :key="index">
<img :src="item.img" alt="" class="banner-img" />
</div>
</div>
</div>
data:
const _this = this;
return {
swiperOption: {
loop: false,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: {
disableOnInteraction: false,
delay: 3000
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
setWrapperSize: true,
grabCursor: true,
on: {
slideChangeTransitionEnd: function(){
_this.curSwi = this.activeIndex
}
}
}
}
最重要的是curSwi的实时更新;autoplay的disableOnInteraction设置false可在点击缩略图后仍然自动轮播,否则会停止
缩略图:
<div class="swiper-container1" v-swiper:mySwiper="swiperOption1" style="100%">
<div class="swiper-wrapper">
<div class="banner-rgt-meng swiper-slide" v-for="(item, index) in bannerList" :key="index" @click="onChoseBanner(index)">
<img :src="item.img" alt="" class="banner-rgt-img" />
<div v-if="curSwi == index" class="banner-rgt-triangle"></div>
</div>
</div>
</div>
swiperOption1: {
direction: 'vertical'
},
就可以了,主要是缩略图的方法onChoseBanner
onChoseBanner(e) {
this.curSwi = e;
this.$refs.mySwiper1.swiper.slideTo(this.curSwi, 1000, false);
},
slideTo() 方法可以跳转到第几张