twitter-bootstrap - 如何在轮播的最后一张幻灯片上禁用按钮？

Question

我正在使用 Bootstrap 轮播，我想在轮播到达最后一张幻灯片时停止滑动(在最后一张幻灯片处停止)，然后禁用“下一步”按钮

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 设置为 display: none 在您的 css 中，因此当加载页面时显示轮播时，左箭头将被隐藏。那么一旦轮播第一次滑动，上面的代码就会显示左箭头。
CSS:

.left {
  display: none;
}

我不会包含 HTML，因为它旨在与样板 Bootstrap 轮播标记一起使用。
DEMO