解决方案一:
在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动画
}
})
}
}