记录swiper3.x版本loop为true轮播踩坑，附带解决方案

loop为true时，踩坑记录。

loop为true时，swiper手动滑动后不再轮播

查看 swiper官网，找到autoplayDisableOnInteraction : false参数，设置后，发现没起作用。
观察发现，手动滑动时触发了 onAutoplayStop事件，那我们在 onAutoplayStop事件内重启loop就可以吧。

解决方案：利用swiperStartAutoplay事件和startAutoplay事件完成重启 loop轮播。

var mySwiper = new Swiper("#topNav", {
   autoplay : 4000,
   speed: 300,
   loop: true,
   onAutoplayStop: function(){
     // console.log('停止loop事件触发了;');
     swiperStartAutoplay();
   },
});

/*鼠标移入停止轮播，鼠标离开 继续轮播*/
var comtainer = document.getElementById('topNav'); // 获取元素
comtainer.onmouseenter = function () {
  mySwiper.stopAutoplay();
};
comtainer.onmouseleave = function () {
  mySwiper.startAutoplay();
};
function swiperStartAutoplay() {
  mySwiper.startAutoplay();
}

loop为true时，当第一次自动滚动结束时进行第二次滚动开始时，第一屏vue的click事件不生效

现象：当我们轮播图的图片轮播一圈后，你会发现之前可以点击的vue的click事件失效了。

原因分析

swiper官网中说明了，当我们开启loop模式时，会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
由于swiper只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决方案：
最好采用原生的事件进行书写，如下：

<a :href="'#/newsDetail/' + item.id ">
  <span>{{item.desc}}</span>
</a>

loop为true时，页面渲染问题

当swiper的每个页面都设置了背景图时，在进行页面切换的过程中，会出现最后一张和第一张背景图被错位复制了一遍。原因如下：

解决方案：

var mySwiper = new Swiper("#topNav", {
    autoplay : 4000,
    loop: true,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    on: {
      slideChangeTransitionEnd: s => {
         s.slideToLoop(s.realIndex, 0, true) // 将当前位置设置到真实 dom 所在位置，解决页面无法渲染的BUG
      },
    }
});