使用swiper 轮播插件ajax 请求加载图片时，无法滑动

因为banner图是动态创建的，在插件开始初始化时，文档流中没用图片，故没有创建相应宽度，通过调整js加载顺序，问题还是没有解决。最后找到swiper插件 api 有属性是可以根据内容变动，自动初始化插件的，添加observer：true后问题解决！

var mySwiper = new Swiper ('.swiper-container', {

        pagination: '.swiper-pagination',

        autoplay: 5000,

        loop: true,

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

     observeParents:true,//修改swiper的父元素时，自动初始化swiper

 }) 

转：https://www.cnblogs.com/demoworld/p/5977799.html

如果遇到滑动时把第一张隔过去了，可以把初始化写在ajax成功回调中。

2.在动态获取数据后马上对swiper进行初始化

$.ajax({
    type:"get",
    url:finalUrl,
    dataType:"json",
    success:function(data){
        $("#reportList").empty();
        for(var i=0;i<reportLength;i++){
            var url="'"+"reportDetial.html"+location.search+"&noticeId="+reportList[i].id+"'";
            reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">'
                +'<div class="item-title">'+data.resp[i].title+'</div>'
                +'<div class="item-content">'+data.resp[i].content+'</div>'
                +'<div class="item-date">'+data.resp[i].createTime+'</div>'
            +'</div>';
        }
        $("#reportList").append(reportHtml);
        var swiper = new Swiper('.swiper-container', {
            slidesPerView : 3，		。。。。。。。
        });
    }
});