☰
Documentation

Pagination

Pagination

The pagination module creates bullet links for each available slide.

Here’s what the pagination module looks like:


Here are the options you can set for the controls. To enable the module, simply set the enabled parameter to true.

$('.slidea').slidea({
  pagination: {
    enabled: true, // Default: false
    position: "bottom",
    "class": "slidea-pagination-light"
    items: function(index){
      return '<div class="slidea-pagination-item"></div>';
    }
  }
});
Option Description
enabled Enable or disable the module.

Values: true, false
position Sets the pagination bullet’s position. The before and after positions will place the pagination outside of the slider.

Values: "top", "bottom", "left", "right", "before", "after"
items A function that gets called to create each pagination bullet.
class Specify the controls color theme through CSS classes.

Values: "slidea-pagination-light", "slidea-pagination-dark"

How do I add text to pagination bullets?

Using the items function you can add pagination text to your pagination items. We’re going to wrap the pagination text inside a span so that we can position it near the pagination bullet. The items function is going to be called for each slide and it’s going to provide us with the index of the pagination item being created. That’s why we can easily make a pagination navigation.

$('.slidea').slidea({
  pagination: {
    position: "right",
    items: function(index){
      var menu = ["Home", "About", "Contact"];
      return '<div class="slidea-pagination-item"><span>' + menu[index] + '</span></div>';
    }
  }
});
Previous
Controls
Read Next
Progress Bar