今天在公司维护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)