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

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,
    }
})

 

posted @ 2018-04-02 10:06  ^梦幻星空^  阅读(344)  评论(0编辑  收藏  举报