Explaining The Bootstrap 3 Carousel Indicator Component Creation Code

Bootstrap 3 Carousel Indicator are those little dots that appear at the bottom of the carousel gallery.

It is there, so as to enable the viewer of the gallery know how many slides there are, and to also be able to skip slide while viewing.

With this post, I wish to enlighten web developers more on the component of the Indicator so that they can manipulate it, and also understand how to create it.

Thus, they will not every time be looking for the full source code to copy and paste to the webpage they want to use Bootstrap 3 Carousel Indicator on.

Bootstrap 3 Carousel Indicator Source Code

The typical Carousel Indicator source code look like this,

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>


As you may already know, <!– Indicators –> is a comment, so there is no much thing to talk about it.

Apart from the fact that it is there to serve as a reminder to you and others, that the code following it are for the Bootstrap Carousel indicators.

Indicator Lists.

The HTML order list tag <ol> is what is used to create the Carousel Indicators.
While List Item tag <li> is used to show how many indicators should appear.

It is highly recommended that the number of List Item should correspond to the number of slides in the Bootstrap 3 Carousel gallery.

This is so that users will know which slide they will be taken to when they click on of the indicators. In our example above, we have only three Indicators.

The Indicator Class

Unlike HTML class properties that allows you to choose the class value, in Bootstrap class properties has a fix value. And this is based on what you want you use the element it appears on for.

Failure to abide by this simple rule, will make the Indicator not to appear.

Indicator List

So, the class value for the <ol> should be carousel-indicators.
Hence the order list <ol> opening tag should be <ol class="carousel-indicators"> you are not to tamper with it or change it in anyway.

This class value tells the browsers that the <ol> tag holds a carousel indicators.

Indicator List Items

The Lite Item <li> tag is the one you can manipulate, but there are some limitation to how you can manipulate it, the guide below will make you be on the safe side.

As mentioned earlier, the number of <li> tag should correspond to the number of slide in the Bootstrap 3 Carousel.

data-target property

The data-target property is used to specify which Carousel the indicator should get slide from when it is clicked. Thus the value of the data-target property should be the ID of the Carousel you want it to appear on.

data-slide-to property

The data-slide-to property is used to specify which slide in the Carousel the indicator should display when it is clicked.

The numbers of slide start counting from 0 and not from the number 1.
In our example, there are three slides in the Carousel so our data-slide-to counted from 0-2 and not from 1-3.

active Class

You will notice from the source code above, that the class=”active” appear only in one list item <li> tag.

This is because the class property of the <li> tag is used to signifies which slide the browser should start sliding from.
This means that if we want the Carousel to start sliding from the 2nd slide, then we will remove the class=”active” property from the first <li> tag and place it in the second.

If you do not place the class=”active” property in any of the <li> tag, the browser will get confuse as to which slide in the Carousel it should start from, because of this some browsers might just ignore the whole Bootstrap 3 Carousel gallery, and thus will not make it functional. So the class=”active” property is very important, do not joke with it.

When you are done, what is remaining is to close the Ordered List <ol> tag we are using with its closing tag, which is </ol>

Leave a comment

Your email address will not be published. Required fields are marked *