Bootstrap Tutorial - Control Carousel in Javascript

The following code shows how to control Carousel in Javascript.
Example

<!DOCTYPE html>
<html lang="en">
<head>
<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(){<!--from   w w w .  j a  v  a2 s . com-->
  // Initializes the carousel
    $(".start-slide").click(function(){
      $("#myCarousel").carousel('cycle');
    });
  // 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">
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: 20px 0;
}

.control-buttons {
  text-align: center;
}

.bs-example {
  margin: 20px;
}
</style>
</head>
<body>
  <div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-interval="3000"
      data-ride="carousel">
      <!-- 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>
    </div>
    <!-- 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>
Click to view the demo