Swiper Navigation Buttons(前后切换按钮) - nextEl

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

nextEl信息

类型:
string / HTMLElement
默认:
null
举例:
.swiper-button-next
启用版本:
4.0.0

效果演示

Slide 1
Slide 2
Slide 3
 
 

修改箭头的颜色:除了默认的蓝色箭头外,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> <!-- 黑色 -->