Create Carousel banner
Description
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 {<!-- w w w. j a v a 2 s.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">‹</a> <a class="carousel-control right"
href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</body>
</html>