swiper在进行动态数据加载时的应用和处理

最近在一个企业门户网站项目，要求做一个后台管理系统对前台门户网页的内容和网站结构进行一定程度修改，决定用swiper控件实现 
banner广告位，因为之前也用过，比较熟悉，它比较轻量，一个banner需要的东西它都有，而且是基于Jquery的，官网链接如下: 
http://www.swiper.com.cn/api/basic/2016/0125/295.html

swiper的初始化如下

1
2
3
1
2
3

在静态数据的情况下正常运行，接下来进行动态数据加载，发现无法正常滑动，后来看到这篇文章： 
http://blog.csdn.net/aiyishengyishi/article/details/53634659
发现可能是swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数，从而完成初始化，但是由于动态加载是在初始化完成进行的操作，所以无法确定swiper-wrapper内部swiper-slide的个数，从而导致左右滑动失效

目前有两种解决方法：

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

$.ajax({
type:"POST",
url:"__URL__"+"/bar",
dataType:"json",
async:"false",
data:{},
success:function(result){
if(result){
console.log(result);
for(var i=0;i<result.length;i++){
         bannerHtml+='<div class="swiper-slide"><a href="'+result[i].banner_url+'"><img src="'+result[i].banner_image+'"></a></div>';
}

$(".swiper-wrapper").html(bannerHtml);
var mySwiper = new Swiper('.swiper-container',{
  autoplay : 5000,
  speed:1000,
  loop: true,
   pagination: '.swiper-pagination',
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev'
})

}
}
})

2.在swiper初始化的时候

swiper1 = new Swiper('.swiper-container', {    initialSlide :0,    observer:true,//修改swiper自己或子元素时，自动初始化swiper    observeParents:true//修改swiper的父元素时，自动初始化swiper});