一、前言
在vue中实现简单的轮播图，我们可以直接使用Element或者Ant等UI框架的走马灯组件，如果需要更复杂的样式，可以利用 Swiper，它提供了各种各样的轮播图效果，例如下方带缩略图的轮播图（轮播图和下方缩略图联动）
二、流程
1、先安装
npm install swiper
#也可指定版本例如^5.4.5
npm install swiper@5.4.5
2、引入swiper
我这边是下载的swiper文件，也可以swiper的CDN
指路swiper官网
（1）在项目中放入官网的swiper.min.css及swiper-bundle.min.js文件
（2）在main.js中或者在html中引入
//main.js
import '@/style/swiper.min.css'
//index.html
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="./swiper-bundle.min.css">
</head>
<body>
...
<script src="./swiper.min.js"></script>
...
</body>
</html>
（3）在所需页面中引入
import Swiper from ‘swiper’
3、然后就可以写代码啦
（1）添加html内容
<div class="content-right">
<div class="bannerBox">
<div class="swiper-container gallery-top">
//上方轮播图
<div class="swiper-wrapper">
<div v-for="(item,index) of proDetails?.photosDetailed" :key="index" class="swiper-slide">
<img class="img" :src="item">
</div>
</div>
</div>
<div class="swiper-down">
<div class="swiper-button-next" />
<div class="swiper-container gallery-thumbs">
//下方缩略图
<div class="swiper-wrapper">
<div v-for="(item,index) of proDetails?.photosDetailed" :key="index" class="swiper-slide swiper-bottom">
<img class="img" :src="item">
</div>
</div>
</div>
//导航按钮
<div class="swiper-button-prev" />
</div>
</div>
</div>
（2）初始化swiper
created() {
this.$nextTick(function() {
this.galleryThumbsLunbo()
this.galleryTopLunbo()
})
},
methods: {
galleryTopLunbo() {
this.galleryTop = new Swiper('.gallery-top', {
spaceBetween: 0,
loop: true,
loopedSlides: 5,
// 左右按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: { // thumbs组件专门用于制作带缩略图的swiper
swiper: this.galleryThumbs,
slideThumbActiveClass: 'swiper-slide-thumb-active'
}
})
},
galleryThumbsLunbo() {
this.galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 15, // 在slide之间设置距离（单位px）
slidesPerView: 3, // 设置slider容器能够同时显示的slides数量
loop: true, // 设置为true 则开启loop模式
freeMode: true, // 默认为false，普通模式：slide滑动时只滑动一格
loopedSlides: 7, // 一般设置大于可视slide个数2个即可
watchSlidesVisibility: true, // 开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
watchSlidesProgress: true // 开启这个参数来计算每个slide的progress(进度、进程)
})
}
}
这边如果使用的是接口返回的数据，容易出现数据不完整及轮播图划不动等情况，这是因为先初始化的swiper，才去调用获取数据的接口，解决方法如下：
methods: {
productDetails() {
common.get('/获取数据的接口').then(res => {
if (res?.code === 1) {
//获取到数据后在初始化swiper
this.$nextTick(function() {
this.galleryThumbsLunbo()
this.galleryTopLunbo()
})
}
})
}
}
三、效果展示
