swiper调整navigation buttons颜色及大小

By | 2020年6月25日

swiper slide是使用前进后退按钮来控制Swiper切换。

swiper5新增可以通过设置Swiper的风格–swiper-theme-color或单独设置按钮风格–swiper-navigation-color来改变按钮颜色。
swiper5新增可以通过设置–swiper-navigation-size来调整按钮大小,默认是44px。

有时你的按钮不想放在container之内,点击时可能会有蓝色的边框,加上样式outline: none 可以去除。

navigation buttons默认颜色是蓝色,我使用–swiper-navigation-color及–swiper-navigation-size对我的幻灯切换按钮进行了样式重设:

.swiper-container {
	width: 100%;
	height: 100%;
	--swiper-navigation-color: #000;/* 单独设置按钮颜色 */
        --swiper-navigation-size: 12px;/* 设置按钮大小 */
}

效果显示如下:

swiper幻灯
swiper幻灯

发表评论

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