What is pagination?

So you have 10 slides, are currently on the third one and want to go directly to the eighth one. Or simpler than this, you want to know which slide are you on or that how many slides does your slider have. The answer to these needs is pagination.

You, more than probably, will be familiar with this concept of pagination if you have a smart phone, specifically an android one. When you're on the homepage a small circle, out of probably a mutiple of them down the screen, is filled denoting that you are on the homepage. As you move to the next thumbnail the next circle fills up and the previous one empties down.

This is pagination. It helps you right away identify how many thumbnails/slides you have and on which one are you currently - two things which may help in building a better UX (User Experience).

And this is it for the explanation part, time to move on the coding part!

Creating elements

Now what we need to do in order to paginate our slider, is to create these circles (you could even have squares, rectangles, triangles - whatever you want).

And to do this we have two choices - we can either:

  1. Manually create the elements in the HTML
  2. Use JavaScript to dynamically create them.

We'll go with the latter since it is easier and more efficient than manually copy pasting element markups, and for that we will need DOM methods for creating and appending elements to HTML.

So let's start by creating a div container for our pagination circles with class .pagination

Altering our previous HTML to include .pagination in it (on line 7), we arrive at the following code:

<div class="slider-cont">
    <div class="slider">
        <div class="slides">Slide 1</div>
        <div class="slides">Slide 2</div>
        <div class="slides">Slide 3</div>
    </div>
    <div class="pagination"></div>
    <button class="slider-nav">&lt; Back</button>
    <button class="slider-nav">Forward &gt;</button>
</div>

The purpose of creating a .pagination element is so that we can first check for it using JavaScript and then put all the pagination circles within it, if it exists.

Otherwise we would've had to create and place the .pagination element using DOM methods, and there would've been no way to check if pagination was actually desired.

Now over to the JavaScript part to dynamically create the pagination circles...

JavaScript - HTML DOM in action

The idea is really simple - we need as many circles as there are .slides.

In other words, we iterate upto slidesLength (the number of .slides elements) and create a pagination circle in each iteration.

var pagination = document.getElementsByClassName("pagination")[0];

if (pagination) {
    var paginationButtons = pagination.getElementsByTagName("span");
    for (var i = 0; i < slidesLength; i++) {
        var ele = document.createElement("span");

        // if its the first circle give it class sel
        if (i === 0) {ele.className = "sel";}

        pagination.appendChild(ele);
    }
}

First, as we had stated before, we check if a .pagination element exists and if it does we only then paginate our slider.

In each iteration, we create a <span> element, give it a class sel if its the first element, and finally append it to the .pagination element.

The code above is not the most efficient way to dynamically create multiple elements. However, for now we'll stick with this simpler version - as the efficient one requires more code and skills.

With this in place we have successfully created the circles to represent different slides in our slider.

Now we just need to give them functionality - upon clicking one, it should navigate us to its respective slide, fill itself and unfill the previously selected one.

Therefore let's even get this functionality part done, but only after we are done applying a touch of style to our pagination circles.

CSS - a touch of style

We want the pagination circles to look like actual circles, have a :hover rule defined, and have a unique look for a selected circle.

This is it!

Consider the CSS code below:

.pagination span {
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 5px;
    background-color: #ddd;
    border-radius: 15px;
}
.pagination span:hover {
    background-color: #bbb;
}

Let's also give a class for the selected circle and make it stand out from the others:

.pagination span.sel {
    background-color: black
}
This darker background color is what gets emphasis placed on the currently selected circle.

Live Example

Giving interactivity

The final thing we need to do now, is to make each pagination circle interactive. That is, as soon as someone clicks on one, the slider shall be navigated to that very slide.

The way we'll do so is by assigning each circle an onclick handler using a closure, inside the same loop we wrote above.

Consider the code below:

var pagination = document.getElementsByClassName("pagination")[0];

function paginationClickHandler(i) {
    index = i;
    navigateSlider();
}

if (pagination) {
    var paginationButtons = pagination.getElementsByTagName("span");
    for (var i = 0; i < slidesLength; i++) {
        var ele = document.createElement("span");

        // give the circle a click handler
        ele.onclick = paginationClickHandler(i);

        if (i === 0) {ele.className = "sel";}
        pagination.appendChild(ele);
    }
}

In each iteration we give an onclick handler to the created element ele by calling paginationClickHandler(i).

This is where the concept of closures step in - paginationClickHandler() returns another function which remembers the variable i passed to the outer function, and is therefore able to change index to that very number; ultimately navigating the slider.

If you wish to understand closures in detail please read our JavaScript Function Closures chapter guiding you well through the concept.

Live Example

Highlighting the circle

If you notice in the live example above, when the slider navigates, the corresponding circle is not highlighted - which is all the essence of pagination.

We should know exactly at which slide we are, by looking at the pagination circles!

Let's now get this dealt with too.

To do the highlighting part we just ought to alter our previous navigateSlider() function slightly and get the job done in the span of seconds.

function navigateSlider() {
    slides[prevIndex].style.display = "none";
    slides[index].style.display = "block";

    paginationButtons[prevIndex].classList.remove("sel");
    paginationButtons[index].classList.add("sel");

    sliderNav[0].disabled = (counter === 0) ? true : false;
    sliderNav[1].disabled = (counter === len - 1) ? true : false;
    prevIndex = index;
 }

The circle corresponding to the new slide gets the class sel added while the one corresponding to the previous slide gets the class removed. That's all the essence of the lines 5-6.

Now when we click on any circle it gets highlighted and the slider gets navigated to the corresponding slide. Perfect!

Paginated Slider

And we are all done with our pagination feature - it has the look to it and even functionality.

Congradulations - we just made our slider better by giving it one more feature. Now although it is working absolutely fine, the slider isn't really visually appealing. Consequently, next we will see how to make our slider more beautiful and give it some transtioning effects while navigating across different slides.