stop bootstrap carousel to cycle at the end of the slide

Question

I wanted such that when I press the next button on the carousel, if it has reached the end of the slide then don't wrap around and go back to the first slide. Is there an easy way to do this in bootstrap 3?

Answer 1

Setting the wrap option to false makes the carousel to stop cycling automatically.

$('#myCarousel').carousel({
  interval: 1000,
  wrap: false
});

Also if you want to hide the left and right controls when the carousel is showing the first/last slides you can do this way:

  $('#myCarousel').on('slid.bs.carousel', '', function() {
  var $this = $(this);

  $this.children('.carousel-control').show();

  if($('.carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  }

});

DEMO