動態請求數據 swiper 初始化無效的解決方案

動態請求數據 swiper 初始化無效的解決方案

方案1.*在動態獲取數據后馬上對swiper進行初始化*

$.ajax({
    type:"POST",
    url:"",
    dataType:"json",
    async:"false",
    data:{},
    success:function(result){
        if(result){
            for(var i=0;i<result.length;i++){
                 bannerHtml+='<div class="swiper-slide"><a href="'+result[i].banner_url+'"><img src="'+result[i].banner_image+'"></a></div>';
        }
        $(".swiper-wrapper").html(bannerHtml);
        var mySwiper = new Swiper('.swiper-container',{
            autoplay : 5000,
            speed:1000,
            loop: true
        })
    }
})

方案2：

*在swiper初始化的時候，加上下面兩個控制屬性：*

var swiper = new Swiper('.swiper-container', { 
    observer:true,//修改swiper自己或子元素時，自動初始化swiper 
    observeParents:true//修改swiper的父元素時，自動初始化swiper 

}）