在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自帶的類名，再進行強制覆蓋便可。

效果圖以下：

最終效果圖