效果图：
1、安装
npm install swiper vue-awesome-swiper --save
2、main.js引用
引用插件
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
引用样式
// import style (<= Swiper 5.x) ，此处引用的是swiper 5版本的样式
import 'swiper/css/swiper.css'
3、代码如下：
<div v-swiper:mySwiper="swiperOption" class="swiper-div">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="banner" v-for="(banner, index) in banners">
<img :src="banner" alt="banner">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
script：
data() {
return {
banners: [ require("./../assets/img12.png"), require("./../assets/img13.jpg"), require("./../assets/img4.jpeg") ],
swiperOption: {
effect: 'coverflow',
speed:300, // 轮播时长300ms
autoplay : { // 自动轮播
delay:3000
},
loop: true, // 环形，不停循环
grabCursor: true,
centeredSlides: true,
slidesPerView: '2',
coverflowEffect: { // 覆盖流样式
rotate: -50,
stretch: 50, // 拉伸值，值越大间隔越近
depth: 200, //位置深度，值越大图越小
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination'
},
}
}
},
样式style：
.swiper-div {
width: 50%;
}
.swiper-wrapper {
width: 100%;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 400px;
height: 300px;
}
.swiper-slide > img {
width: 100%;
height: 100%;
}
api地址：https://www.swiper.com.cn/api/
