swiper ajax动态获取数据,轮播图播放问题
解决方案一:在new swiper时,添加两个属性:observer:true,//修改swiper自己或子元素时,自动初始化swiperobserveParents:true,//修改swiper的父元素时,自动初始化swiper此时解决轮播图动态获取不能播放的问题,可能还存在轮播切换时闪动的问题和动态添加轮播图后,导致原本图片顺序改变或重复的问题解决方案二:在获取完...
·
解决方案一:
在new swiper时,添加两个属性:
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
此时解决轮播图动态获取不能播放的问题,可能还存在轮播切换时闪动的问题和
动态添加轮播图后,导致原本图片顺序改变或重复的问题
解决方案二:
在获取完动态数据后,立即初始化swiper

此时可能出现,轮播图切换闪动的问题
解决方案三:
在获取动态数据后,立即初始化swiper并添加observer:true和observerParents:true属性,可解决上述存在的多种问题
代码示例:
success:function(res)
{
var lbinfo=res.lbinfo;
console.log(lbinfo);
var wrapper=document.querySelector('.swiper-container .swiper-wrapper');
for(var i=0;i<lbinfo.length;i++)
{
//创建滑块
var slideDiv=document.createElement('div');
slideDiv.className='swiper-slide';
wrapper.appendChild(slideDiv);
coverDiv.setAttribute('swiper-animate-delay','0.3s');
-----------------------------------------------------------------
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
loop: true,
autoplay:3500,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
***********************
observer: true,
observerParents: true,
***********************
//如果需要滚动条
scrollbar: '.swiper-scrollbar',
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
}
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)