navigation
使用前进后退按钮来控制Swiper切换。
swiper5新增可以通过设置Swiper的风格
swiper5新增可以通过设置
有时你的按钮不想放在container之内，点击时可能会有蓝色的边框，加上样式outline: none 可以去除。
swiper5新增可以通过设置Swiper的风格
--swiper-theme-color或单独设置按钮风格--swiper-navigation-color来改变按钮颜色。swiper5新增可以通过设置
--swiper-navigation-size来调整按钮大小，默认是44px。
有时你的按钮不想放在container之内，点击时可能会有蓝色的边框，加上样式outline: none 可以去除。
navigation信息
- 类型：
- object
- 启用版本：
- 4.0.0
效果演示
使用方法示例
从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><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
<div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<style type="text/css">
.swiper{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
</style>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/navigation/355.html