乐趣区

关于swiper.js:swiper和vueawesomeswiper使用配置

最近在应用 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 以下配置如下:


退出移动版