Bootstrap Tutorial - Create Carousel banner








The following code shows how to create Carousel banner.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script type='text/javascript'
  src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script type='text/javascript'
  src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<style type='text/css'>
.container {<!--from w  w w.  ja  v  a2s .com-->
  margin-top: 10px;
}

.well {
  overflow: hidden
}

.image-icon {
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>
  <div class="container-fluid">
    <div class="row-fluid">
      <div id="myCarousel" class="carousel slide">
        <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">
            <div class="well">
              <div class="span7">
                <img
                  src="http://placehold.it/200x200"
                  alt="" class="image-icon" />
              </div>
              <div class="span4">
                <h6>My Text Area1</h6>
                <p>
                  Description of that functionality <br />Multi lines of text
                </p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="well">
              <div class="span7">
                <img
                  src="http://placehold.it/200x200"
                  alt="" class="image-icon" />
              </div>
              <div class="span4">
                <h6>My Text Area2</h6>
                <p>
                  Description of that functionality <br />Multi lines of text
                </p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class=" well">
              <div class="span7">
                <img
                  src="http://placehold.it/200x200"
                  alt="" class="image-icon" />
              </div>
              <div class="span4">
                <h6>My Text Area3</h6>
                <p>
                  Description of that functionality <br />Multi lines of text
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel"
          data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
          href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo