最近在应用swiper实现轮播成果:

swiper版本不同,应用有所不同。
swiper6配置如下:
main.js:
app.vue:

optionsAc: {
direction: 'vertical',
effect: 'coverflow',
slideShadows: false,
coverflow: {
stretch: -40,
depth: 200,
modifier: 2,
rotate: 0
},
slidesPerView: 1, //一行显示3个
spaceBetween: 0, //距离30
grabCursor: true,
centeredSlides: true,
speed: 1000,
// loop:true,//循环会导致点击切换和显示错位
on: {

slideChangeTransitionEnd (swiper) {  vm.$nextTick(function(){    this.clickAc=swiper.snapIndex  })}

}
}
swiper6以下配置如下: