设置了effect后不生效,看了半天原因,源码也看过来了,以为配置项有什么问题,或者是什么方法没有调用到。
vue-awesome-swiper也看了下使用,整个都替换了一遍也没什么用。
试了下用鼠标拖拽有效果,可是自动轮播的时候effect效果就没有了。
swiper版本:5.4.5
vue-awesome-swiper版本:4.1.1
不过原因和版本没什么关系,放这里作为参考。
结论:speed设置为0了!不知道谁干的好事……
swiperOptions: {
loop: true,
autoplay: {
delay: 5000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
effect: 'cube',
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
speed: 500, // 就是这个东西!
observer: true,
observeParents: true,
on: {
// 使用es6的箭头函数,使this指向vue对象
slideChange: () => {
// 不能直接使用 this.swiperActive = index,this指向当前 class Index?不是指向VueComponent??
this.setIndex();
},
},
},