swiper动态请求数据loop无效不能循环播放的问题

802 阅读1分钟

今天在公司维护jquery项目的时候用到了swiper做分组循环轮播图,在获取数据源后生成字符串插入swiper里面,swiper不能循环播放的问题。

在最后一张图点击下一张按钮无法跳到第一张图

原始代码

//轮播图渲染
    get2('JCWTZP', {zxguid,zxguid}, function (result) {
        if (result) {
        var wtdata = eval("(" + result + ")");
        let myStr="";
        for (var i = 0; i < wtdata.length; i++) {                
                myStr+="<div class='swiper-slide' docid='" + wtdata[i].archivesguid + "' filespkid='" + wtdata[i].archivesguid + "'"+ 
                    "><div class='monitor-swiper-slide'><div class='monitor-swiper-img' style='background-image:url(../../../SpMsg/WriteImg.aspx?thumbWi=300&thumbHi=300&argid=" +
                    wtdata[i].archivesguid  + ")'></div><div class='monitor-swiper-text'>" + wtdata[i].PFR + " " +
                     "<p>" + wtdata[i].MBMC + "</p></div></div></div>";
            }
         $('.swiper-wrapper').html(myStr);

       var swiper = new Swiper(".mySwiper", {
        slidesPerView: 4,
        spaceBetween: 30,
        // slidesPerGroup: 4,
        loop: true,
        loopFillGroupWithBlank: true,
        observer:true,//修改swiper自己或子元素时,自动初始化swiper 
        observeParents:true,//修改swiper的父元素时,自动初始化swiper 
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        }
       });                    
      }
});

解决方法

在new Swiper的时候加入setTimeout

setTimeout(()=>{
    var swiper = new Swiper(".mySwiper", {
    slidesPerView: 4,
    spaceBetween: 30,
    // slidesPerGroup: 4,
    loop: true,
    loopFillGroupWithBlank: true,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper 
    observeParents:true,//修改swiper的父元素时,自动初始化swiper 
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    }
  });                    
},1000)