CODEWITHSUNDEEP
jquerycssmaterial-designmaterialize
Code Guy
Code Guy

Reputation: 3198

Stop looping in Carousel materializecss

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>

Upvotes: 0

Views: 1155

Answers (1)

tao
tao

Reputation: 90188

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

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

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>

Upvotes: 1

Related Questions