一般的，如果是静态数据（本地数据），可以直接在mounted生命周期中初始化，循环轮播、自动播放都比较正常。
但是，如果是动态从后台获取数据的话，采用上述方法会发现，轮播图无法自动播放，也无法拖拽。
解决办法：在从后台获取完数据之后再初始化swiper，同时启动动态检查器observer，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper，默认是false。这时候使用autoplay开启自动播放是可以的，
然而当加上loop让其循环播放时，会发现是有问题的。如果不要循环播放的话，上述方法勉强可行，但是如果想要自动播放与循环轮播同时生效的话，还得另寻他法。
解决方法：在获取完数据后，将swiper放在$nextTick下一个UI帧再初始化。
this.$nextTick(() => { // 下一个UI帧再初始化swiper
this.initSwiper();
});
然后在initSwiper方法中，完成swiper初始化，如：
initSwiper () {
const _this = this
var mySwiper = new Swiper (‘.swiper-container1‘, {
loop: true,
autoplay:true,
observer:true,
observeParents:true,//修改swiper的父元素时，自动初始化swiper
autoplay: {
disableOnInteraction: false, // 手动滑动后继续自动播放
},
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination‘,
}
})
}
可以发现，现在这样是可以了，能够自动播放，也能循环播放，手指滑动后还能继续自动播放。
然而，如果我想点击banner，根据不同路径跳转到不同的页面，这个该怎么实现呢？第一想法肯定是在swiper-slide上绑定click事件，通过click事件获取跳转路径的同时完成页面跳转，本来是没啥大问题的，但是在循环轮播的情况下，第一次播放完毕，进行第二次播放的时候，点击第一个banner，会发现并没有获取到跳转路径，也就是说点击事件失效了。
查找了下问题所在，发现在 loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。
这时候我想到了swiper中的回调函数，click事件，那么上面的initSwiper事件就成这样了。
initSwiper () {
const _this = this
var mySwiper = new Swiper (‘.swiper-container1‘, {
loop: true,
autoplay:true,
on:{
click: function(e){
let url = e.target.dataset.jumpurl // jumpurl是在swiper-slide中动态绑定的data-jumpUrl属性，值是从后台获取的跳转链接
_this.bannerJump(url)
},
},
observer:true,
observeParents:true,//修改swiper的父元素时，自动初始化swiper
autoplay: {
disableOnInteraction: false,
},
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination‘,
}
})
}
然后添加bannerJump事件：
bannerJump (url) {
window.location.href = url
}
到这里，一个自动播放、循环轮播、点击跳转的banner就大功告成了。
