Oh!!! creating carousel(slide) was never been easy before bootstrap. Creating carousel with responsive design is really challenging with javascript or using other language. Bootstrap makes it really simple in creating carousel. Below is a running code for creating carousel:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicator">
<li data-target="#myCarousel" data-slide="0" class="active"></li>
<li data-target="#myCarousel" data-slide="1"></li>
<li data-target="#myCarousel" data-slide="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/image1.jpg">
<div class="container">
<div class="carousel-caption">
<h2>My Heading</h2>
<p><a class="btn btn-large btn-primary">Sign Up</a></p>
<p>This is a commercial website. Please click above button for register</p>
</div>
</div>
</div>
<div class="item">
<img src="img/image2.jpg">
<div class="container">
<div class="carousel-caption">
<h2>My Heading</h2>
<p><a class="btn btn-large btn-primary">Sign Up</a></p>
<p>This is a commercial website. Please click above button for register</p>
</div>
</div>
</div>
<div class="item">
<img src="img/image3.jpg">
<div class="container">
<div class="carousel-caption">
<h2>My Heading</h2>
<p><a class="btn btn-large btn-primary">Sign Up</a></p>
<p>This is a commercial website. Please click above button for register</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon-chevron-right"></span>
</a>
</div>
Demo:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicator">
<li data-target="#myCarousel" data-slide="0" class="active"></li>
<li data-target="#myCarousel" data-slide="1"></li>
<li data-target="#myCarousel" data-slide="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/image1.jpg">
<div class="container">
<div class="carousel-caption">
<h2>My Heading</h2>
<p><a class="btn btn-large btn-primary">Sign Up</a></p>
<p>This is a commercial website. Please click above button for register</p>
</div>
</div>
</div>
<div class="item">
<img src="img/image2.jpg">
<div class="container">
<div class="carousel-caption">
<h2>My Heading</h2>
<p><a class="btn btn-large btn-primary">Sign Up</a></p>
<p>This is a commercial website. Please click above button for register</p>
</div>
</div>
</div>
<div class="item">
<img src="img/image3.jpg">
<div class="container">
<div class="carousel-caption">
<h2>My Heading</h2>
<p><a class="btn btn-large btn-primary">Sign Up</a></p>
<p>This is a commercial website. Please click above button for register</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon-chevron-right"></span>
</a>
</div>
Demo:
![]() |
fig: Carousel |
No comments:
Post a Comment