记录一下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
	})
},

还有其他问题欢迎提问

# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue