停止在“轮播"实现中循环 [英] Stop looping in Carousel materializecss

问题描述

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

I have a material CSS carousel which I want to stop looping after it reaches the last item, instead of returning to the first item it should display a message. similarly, when I hit back it should display a message instead of going to the last item.

 <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>

推荐答案

您的jQuery并不是特别正确.如果您想检查活动轮播项目是否具有类last，则您的jQuery应该看起来像这样:

Your jQuery is not particularly correct. If you wanted to check if the active carousel item has the class last your jQuery should have looked like this:

 // 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-slider)中carousel-item类的第一个元素:

However, that's not the proper way to check if your active carousel item is last, because materialize doesn't add the class last to the last carousel item.
Looking at the markup, a reliable way would be to check if the next sibling of the active carousel item has the class carousel-item.
Additionally, you probably want to stop the loop in the opposite direction as well, by checking if the currently active carousel item is the first element with carousel-item class inside its parent (.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.

Note the above will apply to all carousels in your page. If you have more than one and want to limit this functionality to one in particular, you'll need to give it an id and use the id in your jQuery.

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

Let's see how this works:

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

这篇关于停止在“轮播"实现中循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！