关于swiper动态加载数据失败滑动失效等问题

具体代码实现片段：

---

下面展示一些 基础用法和动态加载数据实现方式。

第一步：取数据
第二步：渲染数据
第三步：初始化swiper

// An highlighted block
var slide_pic=[
        {
            img:'assets/images/banner1.png',
            link:'https://www.baidu.com/'
        },
        {
            img:'assets/images/banner2.png',
            link:'https://www.baidu.com/'
        },
        {
            img:'assets/images/banner4.png',
            link:'https://www.baidu.com/'
        }
    ]

    var slide_lists = ''//成功案例展示demo 
    $.each(slide_pic,function(i,e){
      slide_lists+='<div class="swiper-slide"><a href="'+e.link+'"><img src="'+e.img+'" alt=""></a></div>'
    });
    $('#slide-lists').append(slide_lists);

    var swiper = new Swiper('.swiper-container', {
      observer:true,
      observeParents:true,
      observeSlideChildren:true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
            el: '.swiper-pagination',
            clickable:true,
            // type : 'custom',
        },
       on:{
            click:function(){
                console.log(this.clickedIndex);
            }
       }
    });

以上是最常用的一种方法，即可单独使用，也可结合接下来的方法二，在取到数据后初始化swiper，
至于初始化里面的以下三个选项加或不加都可以。
	  observer:true,
      observeParents:true,
      observeSlideChildren:true,

// An highlighted block
$.ajax({
    type:"get",
    url:finalUrl,
    dataType:"json",
    success:function(data){
      $("#slide-lists").empty();
      for(var i=0;i<data;i++){
       slide_lists+='<div class="swiper-slide"><a href="'+data[i].link+'"><img src="'+data[i].img+'" alt=""></a></div>'
      }
      $('#slide-lists').append(slide_lists);
      var swiper = new Swiper('.swiper-container', {
             navigation: {
		        nextEl: '.swiper-button-next',
		        prevEl: '.swiper-button-prev',
		     },
      });
   }
});

1. observer:启动动态检查器，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，此时可以使用update()方法更新。当然，如果已经为true了，就代表开启，自动检测更新，不需要使用updata()
2. observeParents将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
3. observeSlideChildren子slide更新时，swiper是否更新。默认为false不更新。

关于update()拓展 补充说明:

它的主要作用是更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updateClasses方法。（只要使用这一个方法就实现了那4个方法的功能），具体实现如下：

// An highlighted block
var mySwiper = new Swiper('.swiper-container',{
  pagination : '.swiper-pagination',
})
$('#btn1').click(function(){
   //点击按钮1，对slide里面的数据进行操作，移除第一个元素
  $(".swiper-wrapper .swiper-slide1").remove(); 
})
$('#btn2').click(function(){
  //因为点击btn1的时候已经把里面一个slide元素移除了，所以，需要再点击按钮2，
  //更新此时swiper内容，生成新的列表，所以用到update()这个方法。
  mySwiper.update()
  alert('更新成功');
})