先说说在vue中如何引用swiper
1.npm命令安装swiper
npm install swiper --save-dev
2.在需要用到swiper插件的组件中引入swiper
js中 import Swiper from "swiper"
css中 @import "swiper/dist/css/swiper.css";
3.初始化swiper
如上步骤完成之后，swiper的大致配置已完成，下面来看看一般都会遇到的问题
项目需求如图所示：
我是使用swiper实现如上图所示，实现的过程可能会遇到的问题如下所示
1.使用静态数据时，页面可以正常滑动，一旦使用动态数据，页面就无法滑动，数据显示也不正常
理想： 每排放四个，且可以左右滑动
现实： 数据都不出来，而且无法进行左右滑动
解决办法: 就是添加一个observer属性
2.使用v-if条件，让swiper动态显示的时候，swiper也会出现如下bug效果
需求：选择下拉框中的转运，才出现如右所示的swiper切选
结果我添加了if条件之后，swiper界面混乱，且无法进行切换
解决办法：添加observeParents属性
3.swiper图默认是从右向左滚动的，怎么改成从左向右滚动
在调用swiper的div上加dir="rtl"就行了，例子见下面链接
http://www.swiper.com.cn/demo/26-rtl.htmlSwiper demo
1，html的dir属性改变排列的方向，所有浏览器都支持。
2，两个属性，ltr从左到右，默认的，left to right的缩写。
3，rtl从右到左，right to left的缩写。
4，swiper支持100%rtl布局。
我们可以根据项目需求来设置箭头初始朝向问题了
4.IE浏览器不兼容swiper4.0版本
当我们把项目运行在IE浏览器中，某些页面就跳转不了，一开始还以为是路由跳转的原因导致的，最后发现罪魁祸首就是swiper
swiper4.0版本不支持IE浏览器，这时候换成swiper3.0.2版本就可以了，当然相应的api也要有所修改
当然swiper可能还有其他坑，我暂时还没遇到，欢迎评论下方提示
