swiper ajax动态获取数据,轮播图播放问题

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



 			}
发布了252 篇原创文章 · 获赞 3 · 访问量 3254

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/103767977