记录一下vue实现带缩略图得轮播图

swiper版本一定要对，高了或者低了都可能会出问题

1.引入swiper和vue-awesome-swiper插件

npm install swiper@4 --save
npm install vue-awesome-swiper@3 --save

2.在main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.使用：
template:布局

<div class="swiper_box">
	<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
		<swiper-slide class="slide-1" v-for="(item,index) in bigImg" :key="index">
			<img :src="item" style="height:100%;width:100%" alt="">
		</swiper-slide>
	</swiper>
	<swiper style="margin-top:30px;" :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
		<swiper-slide class="slide" style="width:100px;height:100px;" v-for="(item,index) in bigImg" :key="index">
			<!-- <div class="imgItem"> -->
				<img style="width:100px;height:100px;" :src="item" alt="">
			<!-- </div> -->
		</swiper-slide>
	</swiper>
</div>

data中配置：

bigImg: [
	'https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF',
	'https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF',
	'https://t7.baidu.com/it/u=2610975262,3538281461&fm=193&f=GIF',
	'https://t7.baidu.com/it/u=4138158235,3956816634&fm=193&f=GIF',
	'https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF',
	'https://t7.baidu.com/it/u=2610975262,3538281461&fm=193&f=GIF',
],
swiperOptionTop:{
	// spaceBetween:10,
	effect:'fade',
	loop:true,
	loopedSlides:4,
	// zoom: true,//双击放大
	// navigation: {
		// nextEl: '.swiper-button-next',
		// prevEl: '.swiper-button-prev'
	// },
	observer: true,
	observeParents: true,
	grabCursor: true // 抓手
},
swiperOptionThumbs:{
	loop:true,    //开启无限轮播  
	slidesPerView: 4,    //显示几个图片
	spaceBetween: 10,	//小图之间得距离 
	direction: 'horizontal',	
	// centeredSlides: true, // 设置活动块居中
	grabCursor: true, // 抓手,
	slideToClickedSlide: true,	
	watchSlidesVisibility: true // 防止不可点击
},	

4.最后添加控制器实现双向控制（要在updated中添加，在mounted中添加会underfind）

updated() {
	this.$nextTick(() => {
		// 实现swiper双向控制
		const swiperTop = this.$refs.swiperTop.swiper
		const swiperThumbs = this.$refs.swiperThumbs.swiper
		swiperTop.controller.control = swiperThumbs
		swiperThumbs.controller.control = swiperTop
	})
},

还有其他问题欢迎提问