Hai now a days bootstrap becoming more popular using bootstrap we can easily design our web application and it also provides various custom jQuery plugins. Go to official website of twitter bootstrap to learn the different features of bootstrap. Because of the popularity of bootstrap, im creating horizontal responsive image carousel using bootstrap. Some times image carousel is also called as image slider.
The main feature of this carousel is responsive. Responsive means we can use and view this carousel on different screen sizes. Whenever the screen size changes the carousel size also automatically change according to screen size it is known as responsive. Now way days most of the websites and web applications are responsive because of the increased usage of smart phones, tablets. Lets start our example.
Note: This carousel is based on bootstrap v2.3.2 so please download the exact version of bootstrap and give the correct path of bootstrap.css, bootstrap.min.js and images.
The main feature of this carousel is responsive. Responsive means we can use and view this carousel on different screen sizes. Whenever the screen size changes the carousel size also automatically change according to screen size it is known as responsive. Now way days most of the websites and web applications are responsive because of the increased usage of smart phones, tablets. Lets start our example.
Sample Screenshot
Note: This carousel is based on bootstrap v2.3.2 so please download the exact version of bootstrap and give the correct path of bootstrap.css, bootstrap.min.js and images.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Carousel using Bootstrap</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="carousel slide" id="imageslider">
<div class="carousel-inner">
<div class="item active">
<img src="img/pic1.jpg" alt="One Hour Sand Timer. ">
<div class="carousel-caption">
<h4>Wallpaper 1</h4>
<p>Here we can write caption for images.For ex:-This is wallpaper 1.</p>
</div>
</div>
<div class="item">
<img src="img/pic2.jpg" alt="Half an Hour Sand Timer.">
<div class="carousel-caption">
<h4>Wallpaper 2</h4>
<p>----------This is wallpaper 2.----------</p>
</div>
</div>
<div class="item">
<img src="img/pic3.jpg" alt="1 Min Timer.">
<div class="carousel-caption">
<h4>Wallpaper 3</h4>
<p>----------This is wallpaper 3.----------</p>
</div>
</div>
</div>
<a href="#imageslider" class="left carousel-control" data-slide="prev">‹
</a>
<a href="#imageslider" class="right carousel-control" data-slide="next">›
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#imageslider").carousel({
interval:5000,
cycle:true
});
</script>
</body>
</html>
0 comments:
Post a Comment