Carousel Options - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Carousel

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

Introduction

The following table lists options which may be passed to carousel() method.

Name TypeDefault?Value Description
interval number 5000 time to delay (in milliseconds) between one slide to another in automatic cycling. If false, carousel will not automatically cycle.
pausestring "hover" Pauses the cycling of the carousel on mouse enter and resumes the cycling of the carousel on mouse leave.
wrap boolean true the carousel should cycle continuously or have hard stops.
keyboard boolean true the carousel should react to keyboard events.

The following code shows how to use the these options.

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 Options</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").carousel({
         interval : 1000,<!--from  w ww  .ja  v  a  2  s. c  om-->
         pause: false
     });
});
</script>
  <style type="text/css">
.carousel{
    background: #EEEEEE;
    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-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>First 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