Stop pan bootstrap pan to loop at end of slide

Question

I would like that when I press the next button on the carousel, if it reaches the end of the slide, do not wrap it and do not return to the first slide. Is there an easy way to do this in bootstrap 3?

Answer 1

Setting the wrap parameter to false makes the carousel stop automatically.

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

Also, if you want to hide the left and right controls when the carousel shows the first / last slides, you can do this as follows:

  $('#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