Introduction
Bootstrap 3 is a very powerful CSS framework that has the power to make the life of a web designer very very easy.
Image slider is a very important thing when web design comes to our mind. You definitely need this in your website to add some life to the inactive text contents in order to catch the attention of the user. Before the revolution brought by Bootstrap, we used to use different jQuery plugins to create image sliders. But after Bootstrap creating an image sliders made so easy for you like a piece of cake.
Bootstrap offers a lot many CSS classes, jQuery plugins. Here we will see how to create a carousel image slider using this Bootstrap 3.
First of all download the Bootstrap 3 files from here Download, and extract the zip file. All you need is the below tow files.
Behind The Scene
Once you downloaded and extracted it from the above link, add a HTML page to the root folder. And give reference to the above said two files located in the JS and CSS folders respectively.
<head> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> </head>Now we will see how to design the carousel slider.
Creating The Carousel Slider
Use the below code to create an impressive image slider.
<div class="carousel slide" id="theCarousel" data-interval="3000"> <div class="carousel-inner"> <div class="item active"> <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" /> </div> <div class="item "> <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" /> </div> <div class="item "> <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" /> </div> </div> </div>*data-interval : This is the time interval in which you want to slide the images(here it is 3 sec).
The class "carousel slide" tells bootstrap that this control contains a carousel image slider inside it. Then the div with class "carousel-inner" holds all the images you need to slide in the slider.
Inside the div with class "carousel-inner" put your image tags in separate divs with class "item", give the class "active" to the item you want to show first.
That's it you are just a step away to create the beautiful image slider. Just call the "carousel" plugin from jQuery in document.ready.
<script type="text/javascript"> (function () { $("#theCarousel").carousel(); })(); </script>* "#theCarousel" is the id of the carousel div.
Here take a look how the simple carousel image slider looks like in jsfiddle.
Giving Indicators To The Carousel
You can add custom slider indicators also in the carousel. Just add a ordered list with class "carousel-indicators"
<ol class="carousel-indicators"> <li data-target="#theCarousel" data-slide-to="0" class="active"></li> <li data-target="#theCarousel" data-slide-to="1"></li> <li data-target="#theCarousel" data-slide-to="2"></li> </ol>* "data-target" attribute holds the id of the carousel and "data-slide-to" attribute holds the slide number starting from 0
* add class "active" with respect to the active element of your slide.
Here take a look how the simple carousel image slider with indicators looks like in jsfiddle.
Giving Custom Navigation To The Carousel
Now lets give a "Prev" and "Next" navigation to our carousel slider. You can do this by just adding two anchor tags, below the last item div.
You can give a span inside the anchor tag to show icons, the code is below.
<a href="#theCarousel" class="carousel-control left" data-slide="prev"> <span class="icon-prev"></span> </a> <a href="#theCarousel" class="carousel-control right" data-slide="next"> <span class="icon-next"></span> </a>
* The anchor tag contains the ID of the carousel in the href attribute.
* The left and right navigation control have a class of "carousel-control left" and "carousel-control right" respectively.
* The "data-slide" attribute has a value of "prev" and "next" accordingly.
Here take a look how the simple carousel image slider with navigation looks like in jsfiddle.
Giving Captions To The Carousel Slider
Here in this section we will give a custom captions to the individual slides. This is very simple to do. Just add a div with class "carousel-caption" just below each image tag. And you are free to place whatever you want inside that div.
See the below code for this.
<div class="carousel-caption"> <h4 class="text-left">Resting In Style</h4> <p class="text-left">Hi Everybody what's going on.....</p> </div>Here take a look how the simple carousel image slider with captions looks like in jsfiddle.
Now you have seen how to make a beautiful carousel with indicators, navigations and captions in Bootstrap 3.
Happy Coding...
2 comments:
Indicators fail to "indicate" slides photo, but does not indicate which is the active.
I think Indicators are indicating properly, if you look at the bottom of the slide you can find the active indicator :)
Post a Comment