Adding Classes

Splide generates the following HTML for the pagination:

<ul class="splide__pagination">
<li>
<button
class="splide__pagination__page is-active"
type="button"
aria-controls="splide01-slide01"
aria-label="Go to slide 1"
aria-current="true"
>
</button>
</li>
<li>
<button
class="splide__pagination__page"
type="button"
aria-controls="splide01-slide02"
aria-label="Go to slide 2"
>
</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.

Custom Pagination

By listening to the pagination:mounted event, you can customize each indicator dot. The following example demonstrates how to add the page number to each indicator dot:

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

An UL element.

itemsPaginationItem[]

An array with PaginationItem objects.

The PaginationItem contains properties for each indicator dot:

liHTMLLIElement

A list item element.

buttonHTMLButtonElement

A button element for a dot.

pagenumber

A page index.