nextEl
设置前进按钮的css选择器或HTML元素。
nextEl信息
- 类型：
- string / HTMLElement
- 默认：
- null
- 举例：
- .swiper-button-next
- 启用版本：
- 4.0.0
效果演示
修改箭头的颜色：除了默认的蓝色箭头外，Swiper还内置了白色 > 和黑色 > 两种箭头颜色，如需其他颜色可更改css样式中的007aff或使用其他图标。
1. 图片图标右键下载
2. 文字图标点击下载
使用方法示例
从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper',{
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<!-- 修改箭头颜色示范 -->
<div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/navigation/209.html