swiper动态添加图片问题

swiper （Table切换和动态加载时候出现的问题）

本文为让心灵-去旅行原创，转载请说明.。

我们在写一个简单的swiper图片轮播的时候很简单，是写死的也就那么几张图片轮播。如果这时候图片和一些东西是后台的，你从js里动态添加到DOM时，这时候你就会发现各种问题。比如轮播图不动，无法滑动。下面的指示小圆点变得混乱了。等等。其实这些都是swiper的渲染问题，因为简单的swiper页面是静态的，资源数稳定的。当产生变化时，swiper需要重新渲染才行，不然就会出现问题。那么怎么解决呢，最简单的办法就是在ajax成功接收后台数据时我们开始渲染调用swiper函数;

例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function  showSlider(data){　　　　 var  data = eval(data);　　　　　 //这是动态添加数据      var  str= "" ;      for ( var  i =0;i<data.lunbos.length;i++){          str+= "<div class='swiper-slide'>" +              "<a class='lunbotu1' href='newsDetail.html?id=" +data.lunbos[i].link_url+ "'>" +                  "<img class='sw_img' src='" +data.lunbos[i].img_url+ "' alt=''>" +              "</a>" +              "<p class='swiper_P'>" +data.lunbos[i].desc+ "</p>" +          "</div>" ;      };      $( '#slider' ).append(str);　　　　　　 //添加完以后就可以调用swiper了 哦了          var  mySwiper =  new  Swiper( '.swiper_one' , {          // direction: 'vertical',          loop:  true ,          autoplay : 2000,          // 如果需要分页器          pagination:  '.swiper-pagination' ,      });