Pagination

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

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

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

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

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

Custom Pagination

You can customize each indicator dot by listening to the pagination:mounted event. The following example demonstrates how to add a page number:

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

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();

The result will be like this:

The handler takes data argument that contains list and items.

The PaginationItem contains properties for each indicator dot: