Хватит зацикливаться в 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-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');
  }
}

Обратите внимание, что вышеизложенное относится ко всем каруселям на вашей странице. Если у вас есть более одного и вы хотите ограничить эту функциональность одним конкретным, вам нужно дать ему идентификатор и использовать идентификатор в вашем jQuery.

Давайте посмотрим, как это работает:

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