关于vue-awesome-swiper使用遇到的一些问题和心得（手动设置宽、手机翻转问题、回调函数、滑动）

1.首先项目用到的"vue-awesome-swiper": "^3.1.3" ，对应官网的swiper 3.0 地址 点击打开链接

2.基本配置就无需多言了，大家可以参考github上的示例 vue-awesome-swiper git地址

3.遇到的第一个问题是UI设计中需要做如下图的样式：

因为 右侧需要一部分露出来，而插件是根据屏幕的宽自动给轮播列表项生成的宽，所以宽设置的话也会被行内样式覆盖，这时候需要一个属性 slidesPerView: 'auto' 这时候我们就可以自己设置宽啦。

4.第二个问题是手机翻转 引起 图片轮播出现空白。

这时候需要添加两个属性

 observer:true,//修改swiper自己或子元素时，自动初始化swiper  
 observeParents:true,//修改swiper的父元素时，自动初始化swiper 

然后需要监听手机翻转事件来重置轮播的数据，来触发这两个属性，从而达到初始化swiper 的效果

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
   self.newsSlideDatas = []; //数据清空
   self.getNewsSlide();  //重新获取数据
}, false);

5.鼠标滑动轮播之后，自动轮播停止了，添加以下属性可重新触发自动轮播

autoplay: {
     delay: 2500,
      disableOnInteraction: false

}

6.关于vue-awesome-swiper插件的一些API的使用方法，具体可以参考 swiper4.0的使用规则，其他版本的直接用的话不会生效。