vue-awesome-swiper 左右箭头不能用和按钮蓝边解

<meta charset="utf-8">

1.在vue项目中使用swiper

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

2.在main.js中全局注册

image

3.在组件中直接使用

image image

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

image

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

image

看图，通过用navigation包裹着，并且将prevButton和nextButton改写成prevEl和nextEl 便可以了。。。

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

image

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

image

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

image

效果图如下：

image

最后左右按钮点击后出现一个蓝边 给outline:none;即可解决

.swiper-button-prev,.swiper-button-next {
  background-size: 55px 55px !important;
  color:'red' !important;
  width: 55px;
  height: 55px;
  top:242px;
  margin-top:0px;
  outline:none;
}