最近在使用swiper实现轮播效果:
image.png
swiper版本不同,使用有所不同。
swiper6配置如下:
main.js:image.png
app.vue:
image.png
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以下配置如下:
image.png
image.png
image.png


刘先生
14 声望0 粉丝

引用和评论

0 条评论