Swiper 轮播插件 之 动态加载无法滑动

Posted 2020-10-29 ^梦幻星空^

1、原因：轮播图未完全动态加载完成，即初始化

2、方法一：ajax链式编程

$.ajax({
    type: "get",
    url: serviceURL + "/listBanner"
}).done(function(data){
    //动态覆盖轮播图父元素中内容
}).done(function(data){
    new Swiper(‘.swiper-container‘, {
        autoplay: true, //可选选项，自动滑动  initialSlide :0,
        pagination: {
            el: ‘.swiper-pagination‘,
            clickable: true,
        }
    })
});

方法二、Swiper提供方法

new Swiper(‘.swiper-container‘, {
    autoplay: true, //可选选项，自动滑动  initialSlide :0,
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
    pagination: {
        el: ‘.swiper-pagination‘,
        clickable: true,
    }
})