swiper解决数据动态加载时轮播失效错乱等问题

先定义var mySwiper = 0全局变量,动态加载数据后,销毁mySwiper,再重新加载mySwiper

observer: true 和 observeParents: true这两个参数必加

var mySwiper = 0;

if (mySwiper !== 0) {
    mySwiper.destroy();
}

// 动态加载数据后
mySwiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
    },
    // loop: true,
    observer: true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents: true,//修改swiper的父元素时,自动初始化swiper
    // observeSlideChildren: true,
    autoplay: {
        delay: 3000,
        // disableOnInteraction: false  // 手动滑动后仍会进行轮播
    },
});
发布了121 篇原创文章 · 获赞 13 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/Vansal/article/details/100989156
今日推荐