ajax请求得数据在swiper中循环可以loop的解决办法

    $.ajax({
	    method: 'post',
	    url: baseUrl+'/api/article',
		data:{category_id: 20},
	    success: function(res){
			var slideHtml = "";
			for(var i=0;i<res.data.length;i++){  
				var slideData = res.data;
			    slideHtml +=`<div class="swiper-slide"><a href="http://ui.diyiyou.com/tl/zygw/detail.html?${slideData[i].id}" target="_blank"><div><i>Q</i><span>${slideData[i].title}</span></div><p class="txt">${slideData[i].describe}</p></a></div>`;
			}
			
			$(".hAskList .swiper-wrapper").append(slideHtml);
					
			intSwiper();
	    }
	});

	
		
	intSwiper = function(){
		if($(".slideIndex").length>0){
			  var mySwiper = new Swiper('.swiper-container', {
				loop : true,
				slidesPerView: 3,
				spaceBetween: 40,
				autoplay: {
				    disableOnInteraction: false, 
				},
				navigation: {
				  nextEl: '.swiper-button-next',
				  prevEl: '.swiper-button-prev',
				},
			  });
		};
	}

也就是把new的swiper放在一个函数中 然后在ajax中调用即可!!!!!!!!!!!!!!!!!

上一篇:轮播图的实现


下一篇:swiper7- 30. 开启轮播图片懒加载