轮播图在一般项目中很常见，很多常用饿ui组件库中也有轮播图，可以不再单独使用swiper，但是当有的ui组件不能完成你的需求后，则可以使用swiper完成。
1，首先安装swiper
yarn add swiper
2，引入
import Swiper from "swiper"; import "swiper/css/swiper.min.css";
3、代码块（布局代码块）
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide_item" v-for="(item,i) in image" :key="i">
<img
@click="$router.push({ path: `/business_detail/${item._id}` })"
:src="item.src"
alt
:onerror="defaultImg"
/>
</div>
</div>
</div>
css-----------如果你可以保证轮播图尺寸一致的话，可以不用限制图片高度，反之，图片尺寸不同的话，你可以通过媒体查询为每个尺寸的轮播图定一下高度
.slide_item img {
width: 100%;
object-fit: cover;
}
媒体查询如下：可根据需要添加
@media (min-width: 400px) and (max-width: 768px) {
.slide_item {
img {
height: 200px;
}
}
}
4、数据获取以及轮播图渲染
businessList().then(res => {
if (res.code == 0) {
this.image=res.data--------------------绑定的轮播图数据
}
this.$nextTick(() => {
this.swiper();--------------此处为轮播初始化，我写成了一个方法
});
});
5、swiper初始化
swiper() {
var mySwiper = new Swiper(".swiper-container", {
autoplay: true,
autoplay: {
disableOnInteraction: false
},
speed: 800,
loop: true,
autoplayDisableOnInteraction: false,
observer: true,----------------当获取图片时，轮播图不会循环轮播，原因是初始化的时候，还没有数据，数据拿到了，又初始化过了，因此加上粉色的这两个对象可以解决这个问题。
observeParents: true,
paginationClickable: true
});
}
6、无缝滚动
swiper() {
var mySwiper = new Swiper(".swiper-container1", {
initialSlide: 0,
autoplay: true,
loop: true,
speed: 1000,
slidesPerView: 5,----------你想有几个图片同时展示在页面上就写几，每次平滑过渡一张图片
spaceBetween: 0,
observer: true,----------原因同上
observeParents: true,
paginationClickable: true,
autoplay: {
disableOnInteraction: false
}
});
}
原文：https://www.cnblogs.com/bingchenzhilu/p/12768903.html