%3c箭头html,nextButton

nextButton

前进按钮的css选择器或HTML元素。

nextButton参数

类型：string / HTMLElement

默认：null

举例：.swiper-button-next

启用版本：3.0.0

效果演示

Slide 1

Slide 2

Slide 3

修改箭头的颜色：除了默认的蓝色箭头外，Swiper还内置了白色 >   和黑色 >   两种箭头颜色，如需其他颜色可更改css样式中的fill%3D'%23007aff'详见下方代码示例。后退按钮同效。

一些PNG箭头素材，可右键下载

使用方法示例

Slide 1

Slide 2

Slide 3

var mySwiper = new Swiper('.swiper-container',{

prevButton:'.swiper-button-prev',

nextButton:'.swiper-button-next',

})

/*Swiper原样式 */

.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");}

/*改变了颜色和加粗的样式*/

.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}

[纠正]

给力

(403)

不给力

(168)