停止在Carousel materializecss中循环

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

 
 button 
 
 
First Panel
 
This is your first panel
 
 
 
Second Panel
 
This is your second panel
 
 
 
Third Panel
 
This is your third panel
 
 
 
Fourth Panel
 
This is your fourth panel
 
 
 Back  Next  function forward() { if ($('.carousel-item ').element.is('.active, .last')) alert('Last'); $('.carousel').carousel('next') }  

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

请注意，上述内容适用于您网页中的所有轮播。 如果你有多个并且想要特别限制这个function，你需要给它一个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'); } } 

    
 
 button 
 
 
First Panel
 
This is your first panel
 
 
 
Second Panel
 
This is your second panel
 
 
 
Third Panel
 
This is your third panel
 
 
 
Fourth Panel
 
This is your fourth panel
 
 
 
 
 
 
Back
 
Next