停止在 Carousel materializecss 中循环

Question

我有一个材质 CSS 轮播，我想在它到达最后一项后停止循环，而不是返回到第一项，它应该显示一条消息。同样，当我回击时，它应该显示一条消息，而不是转到最后一项。

 <div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</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>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
    <button onclick="backward()">Back</button>&emsp;
    <button onclick="forward();">Next</button>
<script>
function forward() {
    if ($('.carousel-item ').element.is('.active, .last')) alert('Last');
    $('.carousel').carousel('next')
}
<script>

Answer 1

您的 jQuery 不是特别正确。如果您想检查活动轮播项目是否具有 last 类，您的 jQuery 应该如下所示：

 // Note this is not the code you need. I'm just explaining a principle here
 if ($('.carousel-item.active').is('.last')) {
   alert('last');
 }

但是，这不是检查您的活动轮播项目是否在最后一个的正确方法，因为 materialize 不会将类 last 添加到最后一个轮播项目。
查看标记，一种可靠的方法是检查活动轮播项目的下一个兄弟是否具有 carousel-item 类。
此外，您可能还想在相反的方向停止循环，方法是检查当前活动的轮播项目是否是其父级 (.carousel-slider) 内具有 carousel-item 类的第一个元素：

$('.carousel').carousel();

function forward() {
  if ($('.carousel-item.active').next().is('.carousel-item')) {
    $('.carousel').carousel('next');
  } else {
    alert('last');
  }
}
function backward() {
  if ($('.carousel-slider .carousel-item').first().is('.active')) {
    alert('first')
  } else {
    $('.carousel').carousel('prev');
  }
}

请注意，以上内容将适用于您页面中的所有轮播。如果你有不止一个，并且想将这个功能限制在一个特定的范围内，你需要给它一个 id 并在你的 jQuery 中使用这个 id。

让我们看看它是如何工作的：

$('.carousel').carousel({fullWidth: true});
 
 function forward(){
  if ($('.carousel-item.active').next().is('.carousel-item')) {
     $('.carousel').carousel('next');
   } else {
    alert('last');
   }
 }
 function backward(){
  if ($('.carousel-slider .carousel-item').first().is('.active')) {
    alert('first')
  } else {
    $('.carousel').carousel('prev');
  }
 }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script type="text/javascript" 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>

 <div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</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>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
  
  <nav>
    <div class="nav-wrapper grey darken-2">
      <ul class="left">
        <li><a onclick="backward()">Back</a></li>
        <li><a onclick="forward();">Next</a></li>
      </ul>
    </div>
  </nav>