Bootstrap Responsive Carousel
Bootstrap Responsive Carousel
Description :
Almost every website having slide show in home page. In this article you will learn how to add a simple silde-show with responsive view (it will fit all the devices like desktops, tablets and smartphones). To add responsive slide-show with help of bootstrap is very simple, follow the below steps to add a beautiful slide-show.
Step1 :
Add the below scripts and styles in your project.
- bootstrap.min.css
- bootstrap-responsive.min.css
- jquery-1.8.0.min.js
- bootstrap.min.js
Step2 :
Create a file named 'index.html' and add below content in that page.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-inner img {
width:100%;
}
</style>
</head>
<body>
<div class="row-fluid" >
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="images/image-11.jpg" alt="">
</div>
<div class="item">
<img src="images/image-22.png" alt="">
</div>
<div class="item">
<img src="images/image-11.jpg" alt="">
</div>
<div class="item active">
<img src="images/image-22.png" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--End Of Carosuel Slide show-->
</div>
</body>
</html>
[/html]
Bootstrap Responsive Carousel example.
Just open the 'index.html' in any browser and re-size the window to get responsive slide show.
