Search This Blog

Saturday, February 11, 2017

Explaining The Bootstrap 3 Carousel Indicator Component Creation Code

Bootstrap 3 Carousel Indicator are those little dots that appear are the bottom of the carousel gallery, and it enables the viewer of the gallery to know how many slide 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 so that 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.

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, <!--My Bootstrap Indicators Sample --> is a comment, so there is no much thing to talk about it.

As you can also see from the code above, HTML order list tad <ol> is what is used to create the Carousel Indicators, while the number of List Item, that is the <li> is based on how many Indicators you want to appear. It is highly recommended that the number of List Item should correspond to the number of slides in the Bootstrap 3 Carousel gallery so that users will know which slide they will be taken to when they click one of the indicators. In our example above, we have only three Indicators.

Unlike when implementing HTML class properties, in Bootstrap class properties has a fix value which is based on what you want you use the element it appears on for, so we want to use the <ol> tag as an Indicator for Bootstrap Carousel, the class value should be carousel-indicators. Failure to abide by this simple role will not make the Indicator to appear.
So the order list <ol> opening tag should be <ol class="carousel-indicators"> you are not to tamper with it or change it in anyway.

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.
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.

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.

You will notice 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 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>

Also Read:
Team +Pinfoltd 



Search This Blog