<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Carousel</title> <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="page-header"> <h1>Carousel <small>Bootstrap Visual Test</small></h1> </div> <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li> <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg"> </div> <div class="carousel-item"> <img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg"> </div> <div class="carousel-item"> <img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <!-- JavaScript Includes --> <script src="../vendor/jquery.min.js"></script> <script src="../../dist/util.js"></script> <script src="../../dist/carousel.js"></script> <script> $(function () { // Test to show that the carousel doesn't slide when the current tab isn't visible $('#carousel-example-generic').on('slid.bs.carousel', function (event) { console.log('slid at ', event.timeStamp); }) }); </script> </body> </html>