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

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

例如,我们想把默认的前进后退按钮改成如下的样式:

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

推荐阅读

  1. 修改VtigerCRM登陆面板【去掉新闻模块】
  2. 如何修改windows Server服务器操作系统远程桌面默认端口3389?
  3. 修改wordpress杂志主题ionmag,移动端不适配出现滚动条!
  4. 为了增加网站最大延迟时间(max_execution_time)修改 php.ini 或 .hthaccess
  5. 如何批量替换wordpress文章中的链接
  6. 如何给swiper轮播图片加超链接?
  7. 如何在swiper中使用两个轮播效果?
  8. Swiper4.x使用方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注