动态数据加载时，swiper的应用和处理

前言：以前都觉得swiper的使用很简单，那是因为使用swiper时都是写的数据，按照官网上介绍直接初始化swiper，随便丢一个地方初始化就ok了，但是在很多需求中，我们都需要动态的改变数据，这样可能就会遇到很多问题。

出现的问题：

• swiper不能自动切换（设置了autoplay）。
• 数据不匹配（需要加载的数据以改变，但是swiper里面的数据出现错误）。
• 数据匹配过后，永远切换不到第一条数据。
• 根本不能切换，手动拉也拉不动。
  ... ...

目前有两种解决办法：

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

$.ajax({
    type:"POST",
    url:"/index"+"/bar",
    dataType:"json",
    async:"false",
    data:{},
    success:function(result){
        if(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
    onSlideChangeEnd: function(swiper){ 
        swiper.update();  //更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；
        mySwiper.startAutoplay();  //重新开始自动切换；
        mySwiper.reLoop();  //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；
    }
});