欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Swiper Navigation Button(前进后退按钮)

程序员文章站 2024-03-25 12:16:34
...

目录

1、navigation

2、nextEl

3、prevEl

4、hideOnClick

5、disabledClass

6、 hiddenClass

7、mySwiper.navigation.nextEl

8、mySwiper.navigation.prevEl

9、mySwiper.navigation.updata()

10、navigationHide

11、navigationShow

1、navigation

前进后退按钮来控制Swiper切换。类型：object。

2、nextEl

前进按钮css选择器和html元素。类型：string / HTMLElement，默认：null，举例：.swiper-button-next。

3、prevEl

后退按钮css选择器和html元素。类型：string / HTMLElement，默认：null，举例：.swiper-button-prev。

箭头默认蓝色，Swiper内置了白色箭头(.swiper-button-white)和黑色(.swiper-button-black)箭头。 

<div class="swiper-container">
    <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-container',{
  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>

4、hideOnClick

点击slide时显示或隐藏按钮（(灬ꈍ ꈍ灬)试了好久才反应过来它的效果..迟钝了-_-||）。类型：boolen，默认：false，举例：true。

BUG处理：如果遇到无效，增加样式 .swiper-container .swiper-button-hidden{ opacity : 0; }

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    hideOnClick: true,
  },
})
</script>

<style>
.swiper-container .swiper-button-hidden{ 
    opacity: 0; 
}
</style>

5、disabledClass

前进后退按钮不可用时的类名。在第一个slide时，后退按钮不可用，该按钮会添加一个不可用时的类名(默认透明度降低)。
类型：string，默认：.swiper-button-disabled，举例：.my-button-disabled。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    disabledClass: 'my-button-disabled',
  },
})
</script>

<style>
.my-button-disabled{
  opacity:0.2;
}
</style>

6、 hiddenClass

按钮隐藏时的类。类型：string，默认：.swiper-button-hidden，举例：.my-button-hidden。可以和hideOnClick一起使用。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    hideOnClick: true,
    hiddenClass: 'my-button-hidden',
  },
})
</script>

7、mySwiper.navigation.nextEl

 获取前进按钮的html元素。

效果：滑到最后一个slide时隐藏前进按钮。

设置第一个和最后一个slide隐藏按钮 .swiper-button-disabled{ display:none; }。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

//滑到最后一个隐藏前进按钮
  on: { // on给元素添加事件
    slideChangeTransitionEnd: function(){ // 回调函数，Swiper从一个slide过渡到另一个slide结束时执行。
      if(this.isEnd){
        this.navigation.$nextEl.css('display','none');
      }else{
        this.navigation.$nextEl.css('display','block');  
      }
    },
  },
})
</script>

<!-- 设置第一个和最后一个slide隐藏按钮 -->
<style>
  .swiper-button-disabled{
    display: none;
  }
</style>

知识点补充：slideChangeTransitionEnd 回调函数，Swiper从第一个slide过度到最后一个slide结束时执行。

8、mySwiper.navigation.prevEl

获取后退按钮的html元素。通过$prevEl获取DOM结构。效果：鼠标移出隐藏按钮，移入显示按钮。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
//鼠标移出隐藏按钮，移入显示按钮
mySwiper.el.οnmοuseοver=function(){ // 鼠标经过事件
  mySwiper.navigation.$nextEl.removeClass('hide');
  mySwiper.navigation.$prevEl.removeClass('hide');
}
mySwiper.el.οnmοuseοut=function(){ // 鼠标移出事件
  mySwiper.navigation.$nextEl.addClass('hide');
  mySwiper.navigation.$prevEl.addClass('hide');
}
</script>

<style type="text/css">
.swiper-container .hide{
  opacity:0;
}
.swiper-button-next,.swiper-button-prev{
  transition:opacity .5s;
}
</style>

知识点补充：onmouseover鼠标经过事件，onmouseout鼠标离开事件。

9、mySwiper.navigation.updata()

更新前进后退按钮。

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
mySwiper.navigation.update();

10、navigationHide

事件函数，navigation隐藏时执行。

11、navigationShow

事件函数，navigation显示时执行。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    hideOnClick: true,
  },
  on: {
    navigationHide: function(){
      alert('按钮隐藏了');
    }
    navigationShow: function(){
      alert('按钮显示了');  
    }
  }
})
</script>

案例一：mySwiper.navigation.nextEl滑到最后一个slide时隐藏前进按钮。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>swiper-navigation前进后退按钮</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <style>
    .swiper-container{
      width: 800px;
      height: 300px;
    }
    .swiper-slide{
      text-align: center;
      line-height: 300px;
      font-size: 80px;
      color: #fff;
    }

    .swiper-button-disabled{
      display: none;
    }

  </style>
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background: #FF8604">slide1</div>
      <div class="swiper-slide" style="background: #4390EE">slide2</div>
      <div class="swiper-slide" style="background: #CA4040">slide3</div>
    </div>
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>

  <script src="js/swiper.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      resistanceRatio: 0,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        slideChangeTransitionEnd: function(){
          if(this.isEnd){
            this.navigation.$nextEl.css('display','none');
          }else{
            this.navigation.$nextEl.css('display','block');
          }
        }
      }
    })
  </script>

</body>
</html>

案例二：mySwiper.navigation.prevEl 鼠标经过时显示，离开时隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>swiper-navigation前进后退按钮</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <style>
    .swiper-container{
      width: 800px;
      height: 300px;
    }
    .swiper-slide{
      text-align: center;
      line-height: 300px;
      font-size: 80px;
      color: #fff;
    }

    .swiper-button-hide{
      display: none;
    }

  </style>
</head>

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background: #FF8604">slide1</div>
      <div class="swiper-slide" style="background: #4390EE">slide2</div>
      <div class="swiper-slide" style="background: #CA4040">slide3</div>
    </div>
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>

  <script src="js/swiper.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      resistanceRatio: 0,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    })
    mySwiper.el.onmouseover = function(){
      mySwiper.navigation.$nextEl.removeClass('swiper-button-hide');
      mySwiper.navigation.$prevEl.removeClass('swiper-button-hide');
    }
    mySwiper.el.onmouseout = function(){
      mySwiper.navigation.$nextEl.addClass('swiper-button-hide');
      mySwiper.navigation.$prevEl.addClass('swiper-button-hide');
    }
  </script>

</body>
</html>

注：swiper.min.css，swiper.min.js文件直接上Swiper官网下载。

参考Swiper API文档：https://www.swiper.com.cn/api/navigation/368.html

相关标签： Swiper

上一篇： 关于Kotlin中定义一个事件抖动拦截器失效的问题

下一篇： jQuery 来了--动画，停止动画，回调函数Callback，链

推荐阅读