今天遇到一个问题，如何在vue项目中，实现两个轮播图相互控制。如图所示：

今天查看了Swiper的文档，文档链接地址：https://www.swiper.com.cn/demo/index.html。依照此方法，自己动手实现了这个功能。

想再次记录一下，代码如下：

HTML代码：

<!-- Swiper -->
<div class="bannerBox">
	<div class="swiper-container gallery-top">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item,index) of goods.IMAGE_PATH">
				<img :src="item" >
			</div>
		</div>
		<div class="swiper-button-next swiper-button-white">
			<i class="el-icon-arrow-right"></i>
		</div>
		<div class="swiper-button-prev swiper-button-white">
			<i class="el-icon-arrow-left"></i>
		</div>
	</div>
	<div class="swiper-container gallery-thumbs">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-bottom" v-for="(item,index) of goods.IMAGE_PATH">
				<img :src="item" >
			</div>
		</div>
	</div>
</div>

JS代码：

methods: {
	galleryThumbsLunbo() {
		this.galleryThumbs = new Swiper('.gallery-thumbs', {
			spaceBetween: 15,    //在slide之间设置距离（单位px）
			slidesPerView: 4,    //设置slider容器能够同时显示的slides数量
			loop: true,        //设置为true 则开启loop模式
			freeMode: true,    //默认为false，普通模式：slide滑动时只滑动一格
			loopedSlides: 5,    //一般设置大于可视slide个数2个即可
			watchSlidesVisibility: true,   //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
			watchSlidesProgress: true,   //开启这个参数来计算每个slide的progress(进度、进程)
		});
	},
	galleryTopLunbo() {
		this.galleryTop = new Swiper('.gallery-top', {
			spaceBetween: 10,
			loop: true,
			loopedSlides: 5,
			// 左右按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			thumbs: {        //thumbs组件专门用于制作带缩略图的swiper
				swiper: this.galleryThumbs
			},
		});
	},
}

created() {

	this.galleryThumbsLunbo();
	this.galleryTopLunbo();

    // setTimeout(()=>{
    //   this.galleryThumbsLunbo();
    //   this.galleryTopLunbo();
    // },500)

},

在实现的过程中，遇到了一个问题。我的代码什么都没有问题，但是swiper轮播图不生效。最后发现是created()方法中，不同的方法加载先后顺序的问题导致的，所以就给加载轮播图的方法写了一个定时器500ms延迟加载，这个问题得到了解决，但这并不是长久之计，肯定有更好的解决办法。谁有更好的解决方法，可以在下方留言，不甚感谢！！