Carousel Events - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Carousel

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Carousel

Introduction

Bootstrap's carousel class includes few events for hooking into carousel functionality.

Event Description
slide.bs.carousel fires when the slide instance method is called.
slid.bs.carousel fired when the carousel has completed its slide transition.

The following example displays an alert message to the user when sliding transition of a carousel item has been fully completed.

Demo Code

ResultView the demo in separate window 

<!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>Example of Bootstrap 3 Carousel Events</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $('#myCarousel').on('slid.bs.carousel', function () {
    console.log("The sliding transition of previous carousel item has been fully completed.");
  });<!--from   w  w w. j av a 2 s . c  o m-->
});
</script>
  <style type="text/css">
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
}

</style>
 </head>
 <body>
  <div>
   <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
    <!-- Carousel indicators -->
    <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>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
     <div class="active item">
      <img src="https://www.java2s.com/style/demo/Firefox.png" alt="First Slide">
      <div class="carousel-caption">
       <h3>Second slide label</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
     </div>
     <div class="item">
      <img src="https://www.java2s.com/style/demo/Opera.png" alt="Second Slide">
      <div class="carousel-caption">
       <h3>Second slide label</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
     </div>
     <div class="item">
      <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="Third Slide">
      <div class="carousel-caption">
       <h3>Third slide label</h3>
       <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
     </div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
   </div>
  </div>
 </body>
</html>

Related Tutorials