swiper ajax dynamic data acquisition, Carousel Figure playback problems

Solution one:
when new swiper, add two attributes:

   observer:true,//修改swiper自己或子元素时,自动初始化swiper
   observeParents:true,//修改swiper的父元素时,自动初始化swiper

At this time, dynamic access to solve the problem can not be played carousel map, there may also be flashing when switching carousel issues and
problems after dynamic rotation map added, resulting in a change of order or repeat original picture

Solution two:
when the dynamic data has been acquired, immediately initialize swiper

Here Insert Picture Description
At this time it may occur, rotation flashing FIG handover problem

Solution three:
After acquiring dynamic data immediately initialize swiper and add observer: true and observerParents: true attribute can solve the above various problems

Code Example:

			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动画
				  } 
				  })
 				}



 			}
Published 252 original articles · won praise 3 · Views 3254

Guess you like

Origin blog.csdn.net/weixin_43294560/article/details/103767977