网上找了很久,只有关于修改颜色的方法。没有找到实用的修改按钮样式的方法。
就自己想了个办法。很简单。
思路:
swiper原来的样式不是能修改颜色嘛,那就将箭头的颜色设置为透明的。然后给箭头的div添加一个图片背景以达到修改按钮样式的目的。
代码:
.swiper-button-next {
/*先将原始箭头的颜色设置为透明的 然后设置一个背景图片 达到修改按钮样式的目的*/
right: 1.5%;
left: auto;
color: rgba(0, 0, 0, 0)!important;
background:url("/assets/images/button_right.png") center center no-repeat;
background-size: 30px 30px;
}
.swiper-button-prev{
left: 1.5%;
right: auto;
color: rgba(0, 0, 0, 0)!important;
background:url("/assets/images/button_left.png") center center no-repeat;
background-size: 30px 30px;
}
最终效果: