swiper自定义导航按钮的左右箭头图标

目前swiper的版本已经到7以上了,版本7的外层容器css属性由".swiper-container"变成了".swiper",其他和版本6区别不大。

本文测试于swiper6版本,主要替换swiper导航按钮(左右箭头),想实现的效果如下图:

swiper官方API里面也介绍了箭头的颜色和大小的自定义方法,目前已经很简单了,直接在外层容器里面定义CSS属性即可:

在导航按钮的父级元素(例如:.swiper-container)定义如下属性:
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
上述代码可以修改箭头的大小和颜色,但是如果感觉箭头样式不好看,想换一个图标怎么办呢?
swiper官方API没有介绍具体方法,鸿硕使用的解决方法如下:
/*先去掉默认样式*/
.swiper-button-prev:after{
    display: none;
}
.swiper-button-next:after{
    display: none;
}
/*再自定义样式*/
.swiper-button-prev{
    width: 35px;
    height: 35px;
    background: url('../images/arrows-l-32.png') no-repeat;
    bottom: 15px;
}
.swiper-button-next{
    width: 35px;
    height: 35px;
    background:url('../images/arrows-r-32.png') no-repeat;
    bottom: 15px;
}
这样便能实现swiper箭头为自定义的图标,如果您有更好的方法,请留言或联系鸿硕。

给TA打赏
共{{data.count}}人
人已打赏
教程

swiper鼠标悬停时停止切换

2022-1-30 10:34:21

IT百科

excel中如何去掉日期后面的时间

2022-2-10 11:15:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索