Pagination

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

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

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.

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

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

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

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

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

.splide__pagination {
  counter-reset: pagination-num;
}


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

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

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.

`list`	`HTMLUListElement`
`items`	`PaginationItem[]`

The PaginationItem contains properties for each indicator dot:

`li`	`HTMLLIElement`
`button`	`HTMLButtonElement`
`page`	`number`