解决问题：swiper动态加载图片后无法滑动

原文：https://www.cnblogs.com/yangguoe/p/9857398.html

原因：swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数，从而完成初始化，但是由于动态加载时在初始化之后的动作，所以导致无法滑动。

解决方案 1：在动态获取数据后，马上对swiper进行初始化；

 1 $.ajax({
 2     type:"get",
 3     url:finalUrl,
 4     dataType:"json",
 5     success:function(data){
 6         $("#reportList").empty();
 7         for(var i=0;i<reportLength;i++){
 8             var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";
 9             reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">'
10                 +'<div class="item-title">'+data.resp[i].title+'</div>'
11                 +'<div class="item-content">'+data.resp[i].content+'</div>'
12                 +'<div class="item-date">'+data.resp[i].createTime+'</div>'
13             +'</div>';
14         }
15         $("#reportList").append(reportHtml);
16         var swiper = new Swiper('.swiper-container', {
17             slidesPerView : 3
18         });
19     }
20 });

解决方案2：

1   var mySwiper = new Swiper ('.swiper-container', {
2         observer:true,//修改swiper自己或子元素时，自动初始化swiper
3         observeParents:true,//修改swiper的父元素时，自动初始化swiper
4         loop: true, // 循环模式选项
5         pagination: {
6             el: '.swiper-pagination',
7         },
8 
9     })

 

一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱；