在vue中使用swiper时左右点击按钮失效等坑分享

1.在vue项目中使用swiper

   1.下载安装包  npm install vue-awesome-swiper --save

2.在main.js中全局注册

3.在组件中直接使用

html

swiper相关配置项

2.坑：swiper左右点击按钮失效....

错误的配置写法

百度到的答案说 是由于高版本的swiper已经区分组件和普通版本了，在低版本的swiper中，以上写法功能能正常生效，可是在高版本中则不行。而且在vue中并不会报错！！

功能能生效

看图，经过用navigation包裹着，而且将prevButton和nextButton改写成prevEl和nextEl 即可以了。。。

3.实现swiper的左右箭头放到slide外面，并定制箭头的样式

默认写法

swiper 默认的样式是 箭头部分在slide内部，所以想要实现swiper左右点击的箭头在slide外面，只须要在swiper标签外再套一个div,再给这个div附上相对定位便可。。

左右点击箭头在slide外面

修改箭头自带样式，只须要找到swiper自带的类名，再进行强制覆盖便可。

效果图以下：

最终效果图