在vue中使用swiper时左右点击按钮失效等坑分享。。。
2019-04-10 本文已影响1374人
涼涼_570e
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自带的类名,再进行强制覆盖即可。
效果图如下:
最终效果图