In this article, we will learn how to create a JavaScript slider using Twitter Bootstrap 3’s Carousel Component.
Understanding Twitter Bootstrap 3 Carousel Component
The markup for the Carousel Component goes as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div> |
- Indicators
- Slider content
- Controls
To set any div as the slider, we have to apply the classes
carousel and slide. The carousel class defines the element as an element with a “merry-go-round” feature. The slide is applied to add the slide effect when the slider changes. Indicators are the small circles placed at the bottom center of the slider to indicate the current slide position and the number of sliders in total. Indicators are declared using an ordered list.
1
2
3
4
5
| <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> |
carousel-indicators to make the child elements look like small circles. Each li element must have a data-target attribute with the value as the id of the parent carousel div. They must also have a unique data-slide-to attribute with integer values as strings in an incremental order starting from “0”. Slider content is the main portion of the slider. It is in this space we will place our slider’s content. The slider content area is defined using the class
carousel-inner. This div can again have unlimited item divs. The first item div must have an active class defined.
1
2
3
4
5
6
7
8
9
| <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> |
item div has two subsections: image and carousel-caption. The image is used as full width display content in the slider. The carousel-caption is placed floating over its respective image. You can place either an
element or a carousel-caption.Controls are the left and right arrow marks that are used to manually change the slider.
1
2
3
4
5
6
7
8
| <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div> |
glyphicon glyphicon-chevron-left class to show the left arrow, and the second glyphicon glyphicon-chevron-right
to show the right arrow. Since Bootstrap uses fonts instead of images
to show the icons, we have to follow glyphicon classes to show the
icons. That’s it! You have successfully created a slider for your website. Plus, we didn’t write a single line of JavaScript to make it work. bootstrap.js does things automatically for you.
Carousel Options
You can further customize the default functions of the slider by adding some moredata-* attributes to the parent carousel div. data-interval is used to indicate the time gap between each slide. It takes a number as the value and the number represents milliseconds. data-pause is used to define when to pause the sliding
activity. If the value is “hover” it stops sliding when the mouse is
placed on the slider. data-wrap is a boolean attribute which tells whether or
not the slider should continue sliding from the beginning once the end
is reached. For JQuery Geeks
Well, if you love using jQuery anddata-* attributes are not your cup of tea, then Bootstrap allows you to initialize sliders using JavaScript, too!To make a carousel div work like a carousel, you have to write the following snippet:
1
| $('.carousel').carousel() |
For example:
1
2
3
4
5
| $('.carousel').carousel({ interval: 2000, pause: “hover”, wrap: true}) |
1
2
3
4
5
| .carousel('pause') // to pause the slider.carousel('cycle') // to cycle through the slider items.carousel(2) // to forcibly display the the 3rd slide in the slider.carousel('prev') // to show the previous slide.carousel(‘next’) // to show the next slide in the slider |
The above methods may be called from within any JavaScript code to manipulate the normal working of the slider. I do find the
prev and next
methods very useful when I want to display my own buttons instead of
Bootstrap’s arrows. Especially when they are placed outside the
carousel’s parent div. 
Written by KiranBloger
Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing
Thanks for the shouted up such an useful post.
ReplyDelete