如何禁用Materialize Carousel首尾项的拖拽与切换功能？

嘿，我懂你的痛点——Materialize自带的noWrap: true确实没法完全禁用首尾项的切换交互，只是不让它循环而已，但触摸和点击还是会触发过渡动画，体验很别扭。下面给你一套可行的方案，完美实现你要的「时间线/页面导览」效果：

核心思路 #

1. 跟踪当前轮播项索引：利用Carousel的onCycleTo事件实时获取当前显示的是第几项
2. 动态控制按钮状态：当处于第一项时禁用「Prev」按钮，处于最后一项时禁用「Next」按钮
3. 阻止触摸滑动行为：在首尾项时，拦截触摸滑动的默认动作，不让它触发过渡

修改后的完整代码 #

HTML部分（仅调整按钮初始状态，其余不变）

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<div class="carousel carousel-slider center" data-indicators="true">
  <div class="carousel-fixed-item center">
    <!-- 初始给Prev按钮加disabled类，默认显示第一项 -->
    <a class="btn waves-effect white grey-text darken-text-2 slide-prev disabled">Prev</a>
    <a class="btn waves-effect white grey-text darken-text-2 share-btn" href="http://google.com" target="_blank">Share</a>
    <a class="btn waves-effect white grey-text darken-text-2 slide-next">Next</a>
  </div>
  <div class="carousel-item red white-text" href="#one!">
    <h2>First Panel</h2>
    <p class="white-text">This is your first panel</p>
  </div>
  <div class="carousel-item amber white-text" href="#two!">
    <h2>2 Second Panel</h2>
    <p class="white-text">This is your second panel</p>
  </div>
  <div class="carousel-item green white-text" href="#three!">
    <h2> 3 Third Panel</h2>
    <p class="white-text">This is your third panel</p>
  </div>
  <div class="carousel-item blue white-text" href="#four!">
    <h2> 4 Fourth Panel</h2>
    <p class="white-text">This is your fourth panel</p>
  </div>
</div>

JavaScript部分（关键逻辑都在这里）

$(document).ready(function () {
  // 初始化Carousel，开启fullWidth和noWrap
  const $carousel = $('.carousel.carousel-slider');
  const totalItems = $carousel.find('.carousel-item').length;
  
  $carousel.carousel({ 
    fullWidth: true, 
    noWrap: true,
    // 每次切换到新项时触发的回调
    onCycleTo: function(item) {
      const currentIndex = $(item).index();
      
      // 更新Prev按钮状态：第一项时禁用，否则启用
      if (currentIndex === 0) {
        $('.slide-prev').addClass('disabled').attr('disabled', true);
      } else {
        $('.slide-prev').removeClass('disabled').attr('disabled', false);
      }
      
      // 更新Next按钮状态：最后一项时禁用，否则启用
      if (currentIndex === totalItems - 1) {
        $('.slide-next').addClass('disabled').attr('disabled', true);
      } else {
        $('.slide-next').removeClass('disabled').attr('disabled', false);
      }
    }
  });

  // 自定义Prev按钮点击事件：只有按钮可用时才执行切换
  $('.slide-prev').click(function (e) {
    if ($(this).hasClass('disabled')) return;
    e.preventDefault();
    e.stopPropagation();
    $carousel.carousel('prev');
  });

  // 自定义Next按钮点击事件：只有按钮可用时才执行切换
  $('.slide-next').click(function (e) {
    if ($(this).hasClass('disabled')) return;
    e.preventDefault();
    e.stopPropagation();
    $carousel.carousel('next');
  });

  // 阻止首尾项的触摸滑动行为
  $carousel.on('touchstart mousedown', function(e) {
    const currentIndex = $(this).find('.active').index();
    // 获取触摸起始位置
    const startX = e.type === 'touchstart' ? e.originalEvent.touches[0].clientX : e.clientX;
    
    $(this).on('touchend mouseup', function(endEvent) {
      const endX = endEvent.type === 'touchend' ? endEvent.originalEvent.changedTouches[0].clientX : endEvent.clientX;
      const swipeDirection = startX > endX ? 'right' : 'left';
      
      // 如果是第一项且试图向左滑动（切换到上一项），或者最后一项且试图向右滑动（切换到下一项），阻止默认行为
      if ((currentIndex === 0 && swipeDirection === 'right') || (currentIndex === totalItems - 1 && swipeDirection === 'left')) {
        endEvent.preventDefault();
        endEvent.stopPropagation();
      }
      
      // 解绑事件，避免重复绑定
      $(this).off('touchend mouseup');
    });
  });

  // 分享按钮逻辑保持不变
  $('.share-btn').click(function (e) {
    var win = window.open('http://google.com', '_blank');
    win.focus();
  });
});

关键细节说明 #

• 按钮状态控制：通过disabled类和属性，既让按钮视觉上变灰不可点击，也阻止了点击事件的执行
• 触摸拦截：监听触摸/鼠标按下和抬起事件，判断滑动方向，在首尾项的无效滑动时阻止默认行为
• onCycleTo回调：Materialize Carousel提供的原生事件，能准确获取当前切换到的项，是实现动态控制的核心

你把这段代码替换到你的CodePen里测试一下，应该就能完全实现你要的效果：在第一项时不能向左滑、Prev按钮禁用；在最后一项时不能向右滑、Next按钮禁用，中间项正常切换。

内容的提问来源于stack exchange，提问作者Tiago Conceiçao