Twitter Bootstrap 3 is one of the best CSS frameworks for developing and designing content management systems. It is easy to design blogs, portfolios and profiles using Twitter Bootstrap’s grid layouts. One thing that many types of CMS have in common is the “Slider”. A sequential automated display of images, a slider can be anything: showcasing your latest projects, showing off your client’s assets, describing special offers, linking to news items, or highlighting your latest blog posts.
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"> <!-- Indicators --> <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> <!-- Slider Content (Wrapper for slides )--> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <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> |
From the above code, we understand that Bootstrap 3 carousel is divided into three major sections:
- Indicators
- Slider content
- Controls
See the live demo of the slider created using the default Bootstrap 3 structure.
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> |
The ordered list is given the class 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> |
Each 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 <h3></h3> element or a <p></p> element – or even both – inside the 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
|
<!-- Controls --> <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> |
There should be two elements: one for each arrow. The first element will have a span with the glyphicon glyphicon-chevron-left class to show the left arrow, and the second element will have 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 more data-* 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 and data-* 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() |
The Carousel options can then be set by passing a JSON object inside the carousel function.
For example:
|
1
2
3
4
5
|
$('.carousel').carousel({ interval: 2000, pause: “hover”, wrap: true}) |
You can also manually trigger slider events using snippets like the ones below:
|
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.
Source Link: http://www.sitepoint.com/creating-javascript-sliders-using-twitter-bootstrap-3/