1.安装swiper

官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

注意： 下载插件【要@5.x】，不然会出现各种BUG。

npm i swiper@5.x vue-awesome-swiper@4.1.1 -S

2.HTML代码

<div class="examples"><div class="swiper-container"><div class="swiper-wrapper"><divclass="swiper-slide"v-for="(item, index) in clist":key="index"><img :src="item.imgUrl" alt="" /></div></div></div>
</div>

3.JS代码

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {data () {return {clist: [{imgUrl: require('/src/assets/images/certify01.png')},{imgUrl: require('/src/assets/images/certify02.png')},{imgUrl: require('/src/assets/images/certify03.png')}],}},mounted() {this.firingSwiper()},methods:{// 启动Swiper(轮播图)firingSwiper() {new Swiper(".swiper-container", {direction: "horizontal", //滑动方向，可设置水平(horizontal)或垂直(vertical)。loop: true, // 设置为true 则开启loop模式  衔接滑动// 自动滑动autoplay: {delay: 2000,stopOnLastSlide: false, // 如果设置为true，当切换到最后一个slide时停止自动切换。disableOnInteraction: false // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay},effect: "coverflow", // 切换效果 "coverflow"（3d流）slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or autocenteredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。spaceBetween: 10, // 在slide之间设置距离（单位px）。slideToClickedSlide: true, // 设置为true则点击slide会过渡到这个slide。// loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。coverflowEffect: {rotate: 0, // slide做3d旋转时Y轴的旋转角度stretch: 0, // 每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比depth: 60, // slide的位置深度。值越大z轴距离越远，看起来越小。modifier: 5, // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。slideShadows: true // 是否开启slide阴影}});},}
}
</script>

4.css代码

<style>
// 自定义轮播图
.examples {margin-top: 0.6rem;overflow: auto;
}
.swiper-container {width: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {width: 206px !important;overflow: hidden;display: flex;align-items: center;
}
.swiper-container .swiper-wrapper .swiper-slide img {width: 100%;height: 256px;border-radius: 12px;
}
</style>