Swiper 动态获取数据轮播

1.导入Swper最新的js和css

2.创建div

<div class="swiper-container" style="height: 310px;margin-top: 25px; width:97%;">
    <div class="swiper-wrapper wrap" id="carousel">                </div>
    
   <!-- <div class="swiper-button-next" ></div>     这是轮播图的左右按钮
    <div class="swiper-button-prev"></div>-->

</div>

3.动态获取数据

var json =  "{categoryId:'fa3f6e14d25f48b9a712bebeb7e788e2',limit:'10'}";
$.ajax({
                url: "com.chinacoal.ccdev.first.NewsModel.showCarousel.biz.ext",
                data: json,
                type: 'POST',
                async:false,
                cache: false,
                contentType: 'text/json',
                success: function (text) {
                var newsList = nui.decode(text.newsList)  ;
                for(var i=0;i<newsList.length;i++){
                $("#carousel").append("<div class='swiper-slide'>内容自己添加</div>");
                }
               
         
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.responseText);
                    },

            }); 

4.在获取数据后重新初始化js

var mySwiper = new Swiper ('.swiper-container', {
                    slidesPerView:4,
                    autoplay: { 
delay: 2000, 
disableOnInteraction: false, 
}, 
                    speed:1000,
loop: true,
observer:true,
observeParents:true,
navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

});