如何在Slick Scroller Carousel中按需隐藏自定义切换按钮

问题的核心在于自定义按钮不会自动继承Slick内置的状态标识，所以你之前针对.slick-arrow[aria-disabled="true"]的CSS不会生效。我们可以通过监听Slick的滑块切换事件，手动根据当前幻灯片的位置来控制按钮的显示与隐藏。

修改后的完整代码 #

<div class="myscroller">
  <div class="item">
    <p>SLIDE 1</p>
  </div>
  <div class="item">
    <p>SLIDE 2</p>
  </div>
  <div class="item">
    <p>SLIDE 3</p>
  </div>
</div>
<button id="left" onClick="myPrev()" class="slick-arrow btn btn-primary">Previous</button>
<button id="right" onClick="myNext()" class="slick-arrow btn btn-primary" style="float: right">Next</button>

<style>
/* 可选：定义按钮隐藏/禁用时的样式 */
.btn-disabled {
  opacity: 0.5;
  pointer-events: none; /* 禁用点击事件，避免无效操作 */
  /* 如果你想直接隐藏按钮，可以替换成：display: none; */
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  const $scroller = $('.myscroller');
  const $prevBtn = $('#left');
  const $nextBtn = $('#right');

  // 初始化Slick轮播
  $scroller.slick({
    infinite: false,
    arrows: false
  });

  // 获取Slick实例，方便后续获取幻灯片总数
  const slickInstance = $scroller.slick('getSlick');

  // 初始状态：页面加载完成后，第一页的上一页按钮要隐藏
  updateButtonState(0);

  // 监听滑块切换完成事件，每次切换后更新按钮状态
  $scroller.on('afterChange', function(event, slick, currentSlide){
    updateButtonState(currentSlide);
  });

  // 封装按钮状态更新的逻辑
  function updateButtonState(currentIndex) {
    const totalSlides = slickInstance.slideCount;
    
    // 第一页：隐藏上一页，显示下一页
    if(currentIndex === 0) {
      $prevBtn.addClass('btn-disabled');
      $nextBtn.removeClass('btn-disabled');
    } 
    // 最后一页：隐藏下一页，显示上一页
    else if(currentIndex === totalSlides - 1) {
      $prevBtn.removeClass('btn-disabled');
      $nextBtn.addClass('btn-disabled');
    } 
    // 中间页：两个按钮都正常显示
    else {
      $prevBtn.removeClass('btn-disabled');
      $nextBtn.removeClass('btn-disabled');
    }
  }
});

function myPrev(){
  $('.myscroller').slick('slickPrev');
}

function myNext(){
  $('.myscroller').slick('slickNext');
}
</script>

关键说明 #

1. 状态更新逻辑封装：把按钮显示/隐藏的判断逻辑放到updateButtonState函数里，代码更清晰，也方便后续维护；
2. 初始化状态设置：页面加载完成后手动调用一次状态更新，确保第一页的上一页按钮一开始就是禁用/隐藏状态；
3. 事件监听：通过Slick的afterChange事件，每次滑块切换完成后自动更新按钮状态，保证状态和当前幻灯片位置同步；
4. 自定义样式类：用.btn-disabled类来控制按钮状态，你可以根据自己的需求调整样式（比如半透明禁用，或者直接隐藏）。

这样就能完美实现你想要的效果：第一页隐藏上一页按钮，最后一页隐藏下一页按钮啦！

内容的提问来源于stack exchange，提问作者Sam Allen