Carousel Methods - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Carousel

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

Introduction

.carousel(options) initializes the carousel with optional options and starts cycling through items.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <title>Example of Bootstrap 3 Carousel Methods</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(){
  // Initializes the carousel
    $(".start-slide").click(function(){
      $("#myCarousel").carousel('cycle');
    });<!--  w  w  w  . j  a va  2s  . c om-->
  // Stops the carousel
    $(".pause-slide").click(function(){
      $("#myCarousel").carousel('pause');
    });
  // Cycles to the previous item
    $(".prev-slide").click(function(){
      $("#myCarousel").carousel('prev');
    });
  // Cycles to the next item
    $(".next-slide").click(function(){
      $("#myCarousel").carousel('next');
    });
  // Cycles the carousel to a particular frame
    $(".slide-one").click(function(){
      $("#myCarousel").carousel(0);
    });
    $(".slide-two").click(function(){
      $("#myCarousel").carousel(1);
    });
    $(".slide-three").click(function(){
      $("#myCarousel").carousel(2);
    });
});
</script>
  <style type="text/css">
.carousel{
    background: #2f4357;
    margin: 20px 0;
}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
}
.control-buttons{
  text-align: center;
}

</style>
 </head>
 <body>
  <div>
   <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
    <!-- 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>
   </div>
   <!-- Carousel controls buttons -->
   <div class="control-buttons">
    <input type="button" class="btn btn-info start-slide" value="Start">
    <input type="button" class="btn btn-info pause-slide" value="Pause">
    <input type="button" class="btn btn-info prev-slide" value="Previous Slide">
    <input type="button" class="btn btn-info next-slide" value="Next Slide">
    <input type="button" class="btn btn-info slide-one" value="Slide 1">
    <input type="button" class="btn btn-info slide-two" value="Slide 2">
    <input type="button" class="btn btn-info slide-three" value="Slide 3">
   </div>
  </div>
 </body>
</html>

Related Tutorials