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



 			}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐