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

使用前进后退按钮来控制Swiper切换。
swiper5新增可以通过设置Swiper的风格--swiper-theme-color或单独设置按钮风格--swiper-navigation-color来改变按钮颜色。
swiper5新增可以通过设置--swiper-navigation-size来调整按钮大小,默认是44px。 有时你的按钮不想放在container之内,点击时可能会有蓝色的边框,加上样式outline: none 可以去除。

navigation信息

类型:
object
启用版本:
4.0.0

效果演示

Slide 1
Slide 2
Slide 3
 
 

使用方法示例

从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>