在vue项目中,写了一个自动播放的swiper,有个小问题就是每次进入页面的时候,swiper的slide位置错乱,刷新下就正常了,最终通过调查发现是spaceBetween用了负值造成的,但是写的效果不得不用负值
mySwiper = new Swiper(".el", {
loop: true,
spaceBetween: -60,
slidesPerView: "auto",
centeredSlides: true,
initialSlide: 1,
autoplay: 1500,
speed: 1000
})
解决办法:
初始化的时候在swiper尺寸变化回调中重新更新下swiper,swiper内部会重新计算,从而解决问题
mySwiper = new Swiper(".el", {
loop: true,
spaceBetween: -60,
slidesPerView: "auto",
centeredSlides: true,
initialSlide: 1,
autoplay: 1500,
speed: 1000,
onBeforeResize: function(swiper) {
swiper.onResize()
} // 加入这段
})