当特定方向上没有更多图像时，隐藏 swiper js 导航按钮（左和右）

Question

当特定方向上没有更多图像时，如何隐藏 swiper js 导航按钮（左右）

例如。当正确方向没有图像时，右侧导航按钮应该隐藏。

Answer 1

使用 jQuery，您可以执行以下操作：

if (swiper.activeIndex===0) {
  $('.left-slide').hide()
  $('.right-slide').show()
} else if (swiper.activeIndex === swiper.slides.length-1) {
  $('.left-slide').show()
  $('.right-slide').hide()
}

第一个条件是第一张幻灯片

Answer 2

我找到了一个使用 CSS

的简单解决方案

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

当该方向没有图像时，这将自动隐藏该方向的导航按钮。

Answer 3

如果你想用淡化效果隐藏它，你可以简单地这样做：

.swiper-button-next, .swiper-button-prev {
  opacity: 1;
  transition: 0.5s ease-in-out;
}
    
.swiper-button-disabled {
      visibility: hidden;
      opacity: 0;
      transition: 0.5s ease-in-out;
}