Bootstrap Tutorial - Activate Carousel via Data Attributes








The following code shows how to activate Carousel via Data Attributes.

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>
<style type="text/css">
h2 {<!--from  ww w.ja v  a 2s  .c om-->
  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 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>
      <!-- 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" 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>

Click to view the demo