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');
 }

但是，这不是检查您的活动轮播项是否是最后一个的正确方法，因为实体化不会将类last添加到最后一个轮播项目。
查看标记，一种可靠的方法是检查活动轮播项的下一个兄弟是否具有类carousel-item。
此外，您可能还希望通过检查当前活动的轮播项是否是其父（carousel-item）中具有.carousel-slider类的第一个元素来阻止相反方向的循环：

$('.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>

停止在Carousel materializecss中循环

1 个答案: