如何更改swiper轮播图中箭头的颜色及大小?

swiper
swiper

我们在使用swiper做网页轮播图的时候,默认的前进和后退的button是蓝色偏大的,有时候在我们的项目中需要修改这两个button的样式及大小。例如,我们想把默认的前进后退按钮改成如下的样式:

swiper做网页轮播图
swiper做网页轮播图

在默认的前进后退按钮加css样式“swiper-button-black”,这个样式是官方提供的少有的几个样式之一,但是显示的图标过大,这是我们需要改变它的大小,需要对“swiper-button-black”设置样式!如下:

<!-- 如果需要导航按钮 -->
 <div class="swiper-button-prev swiper-button-black"></div>
 <div class="swiper-button-next swiper-button-black"></div>
.swiper-button-black{ height: 23px!important; margin-top: -12px!important;
 }<!--必须加!important,否则显示不出来效果--->

参考官网:http://www.swiper.com.cn/api/Navigation_Buttons/2015/0308/209.html

滚动至顶部