如何在旋转木马的最后一张幻灯片上禁用按钮？

Question

我正在使用自举旋转木马,我想阻止旋转木马在到达最后一张幻灯片时滑动(在最后一张幻灯片处停止),然后禁用"下一步"按钮

Answer 1

要禁用旋转木马"包装",可以选择.您可以在轮播上设置data-wrap ="false",也可以在初始化轮播时将其放在选项中.

为了处理下一个/上一个按钮的禁用,我认为Naliza的答案工作正常,但这是一个非常多的代码.这是一个较短的版本,它处理将wrap属性设置为false:

jQuery初始化轮播并显示/隐藏上一个/下一个箭头:

$('.carousel').carousel({
  wrap: false
}).on('slid.bs.carousel', function () {
    curSlide = $('.active');
  if(curSlide.is( ':first-child' )) {
     $('.left').hide();
     return;
  } else {
     $('.left').show();   
  }
  if (curSlide.is( ':last-child' )) {
     $('.right').hide();
     return;
  } else {
     $('.right').show();      
  }
});

由于事件处理程序仅在旋转木马滑动后运行,因此您希望将.left设置为在css中显示:none,因此当加载页面时显示轮播时,左箭头将被隐藏.然后,当旋转木马第一次滑动时,上面的代码将显示左箭头.

CSS:

.left {
  display: none;
}

我不会包含HTML,因为它旨在使用样板文件Bootstrap轮播标记.

DEMO

Answer 2

看看这个 - > http://www.bootply.com/0i7STdt3Ex

您只需要检查旋转木马中的项目是否在滑动时是最后一个