Adding Classes

Splide generates the following HTML for the pagination:

<ul class="splide__pagination splide__pagination--ltr" role="tablist" aria-label="Select a slide to show">
<li role="presentation">
<button
class="splide__pagination__page is-active"
type="button"
role="tab"
aria-controls="splide01-slide01"
aria-label="Go to slide 1"
aria-selected="true">
</button>
</li>
<li role="presentation">
<button
class="splide__pagination__page"
type="button"
role="tab"
aria-controls="splide01-slide02"
aria-label="Go to slide 2"
tabindex="-1"
>
</button>
</li>
......
</ul>
HTML

You can add your classes to the wrapper and button elements by the classes option:

new Splide( '.splide', {
classes: {
pagination: 'splide__pagination your-class-pagination',
page : 'splide__pagination__page your-class-page',
},
} );
JavaScript

Because Splide refers classes where splide__ is prefixed from CSS, you should add both default and your classes, not only yours.

Placeholder

By default, Splide appends pagination to a parent of a track. You are able to specify the position by adding a placeholder as <ul class="splide__pagination"></ul>:

<section class="splide" aria-label="Placeholder Example">
<ul class="splide__pagination"></ul>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">...</li>
</ul>
</div>
<!-- default location -->
</section>
HTML

But do not insert the placeholder in the track element (structure restriction).

Direction

By default, the pagination direction is determined by the direction option. If you set direction to 'ttb', Splide treats pagination as "vertical" regardless of how your pagination is visually displayed, assigning aria-orientation: vertical to the element and observing / to move focus.

In case that you'd like to use horizontal pagination in the vertical carousel, or vise versa, you can override the direction by the paginationDirection option:

new Splide( '.splide', {
direction : 'ttb',
paginationDirection: 'ltr',
} );
JavaScript

Pagination Number

Without JavaScript, the CSS counter allows you to add numbers to pagination like this:

.splide__pagination {
counter-reset: pagination-num;
}
.splide__pagination__page:before {
counter-increment: pagination-num;
content: counter( pagination-num );
}
CSS

Custom Pagination

You can customize each indicator dot by listening to the pagination:mounted event. The following example demonstrates how to add page numbers (the CSS way above is more simple):

const splide = new Splide( '.splide' );
splide.on( 'pagination:mounted', function ( data ) {
// You can add your class to the UL element
data.list.classList.add( 'splide__pagination--custom' );
// `items` contains all dot items
data.items.forEach( function ( item ) {
item.button.textContent = String( item.page + 1 );
} );
} );
splide.mount();
JavaScript

The result will be like this:

  • 01
  • 02
  • 03
  • 04
  • 05

The handler takes data argument that contains list and items.

listHTMLUListElement
itemsPaginationItem[]

The PaginationItem contains properties for each indicator dot:

liHTMLLIElement
buttonHTMLButtonElement
pagenumber