prevEl
设置后退按钮的css选择器或HTML元素。
prevEl信息
- 类型:
- string / HTMLElement
- 默认:
- null
- 举例:
- .swiper-button-prev
- 启用版本:
- 4.0.0
效果演示
修改箭头的颜色:除了默认的蓝色箭头外,Swiper还内置了白色 < 和黑色 < 两种箭头颜色,如需其他颜色可更改css样式中的007aff或使用其他图标。
使用方法示例
从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-prev swiper-button-white"></div> <!-- 白色 -->
<div class="swiper-button-prev swiper-button-black"></div> <!-- 黑色 -->
转载原创文章请注明:文章转载自:Swiper中文网 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/navigation/210.html