swiper 缩略图与banner联动

版本：“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() 方法可以跳转到第几张