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

获取前进按钮的HTML元素

mySwiper.navigation.nextEl信息

启用版本:
4.0.0

效果演示

滑到最后一个slide时隐藏前进按钮

slider1
slider2
slider3
 
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  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>

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