Bootstrap Tutorial - Activate Carousel via JavaScript








The following code shows how to activate Carousel via JavaScript.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript"
  src="http://code.jquery.com/jquery.min.js"></script>
<script
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--   w  w w. j a v a 2s . c o  m-->
    // Activate carousel
    $("#myCarousel").carousel();
    
    // Enable carousel control
  $(".left").click(function(){
      $("#myCarousel").carousel('prev');
    });
    $(".right").click(function(){
      $("#myCarousel").carousel('next');
    });
    
    // Enable carousel indicators
    $(".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">
h2 {
  margin: 0;
  color: #666;
  padding-top: 90px;
  font-size: 52px;
  font-family: "trebuchet ms", sans-serif;
}

.item {
  background: #333;
  text-align: center;
  height: 300px !important;
}

.carousel {
  margin-top: 20px;
}

.bs-example {
  margin: 20px;
}
</style>
</head>
<body>
  <div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000"
      data-ride="carousel">
      <!-- Carousel indicators -->
      <ol class="carousel-indicators">
        <li class="slide-one active"></li>
        <li class="slide-two"></li>
        <li class="slide-three"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">
          <h2>Slide 1</h2>
          <div class="carousel-caption">
            <h3>First slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="item">
          <h2>Slide 2</h2>
          <div class="carousel-caption">
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="item">
          <h2>Slide 3</h2>
          <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl
              consectetur.</p>
          </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left"> <span
        class="glyphicon glyphicon-chevron-left"></span>
      </a> <a class="carousel-control right"> <span
        class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  </div>
</body>
</html>

Click to view the demo