$(function () { $('#myCarousel').carousel({ interval: 2000 }); $('#myCarousel').on('slid.bs.carousel', function (e) { if ($('.carousel-inner .item:last').hasClass('active')) { $('#myCarousel').carousel('pause'); } if ($('.carousel-inner .item:first').hasClass('active')) { $('#myCarousel').carousel('cycle'); } }); });
<!-- Carousel --> <div id="myCarousel" class="carousel slide"> <!-- Menu --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Items --> <div class="carousel-inner"> <!-- Item 1 --> <div class="item active"> <img src="http://lorempixel.com/800/300/abstract/1" /> <div class="container"> <div class="carousel-caption"> <h1>Bootstrap 3 Carousel Layout</h1> <p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p> <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> </p> </div> </div> </div> <!-- Item 2 --> <div class="item"> <img src="http://lorempixel.com/800/300/abstract/2" /> <div class="container"> <div class="carousel-caption"> <h1>Changes to the Grid</h1> <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> <p><a class="btn btn-large btn-primary" href="#">Learn more</a> </p> </div> </div> </div> <!-- Item 3 --> <div class="item"> <img src="http://lorempixel.com/800/300/abstract/3" /> <div class="container"> <div class="carousel-caption"> <h1>Percentage-based sizing</h1> <p>With "mobile-first" there is now only one percentage-based grid.</p> <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a> </p> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div>