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',
} );

No Paging

By default, if you provide perPage option, Splide generates a pagination button for each page, but not for each slide. In case that you want to disable this "paging" — meaning make a carousel move one by one and display all dots — set the focus option to 0 (you don't have to set perMove in this case).

The example above has 9 pagination dots because it contains 9 slides. But when you move the carousel to the end, you may think the last 2 dots are not necessary since they just change the active slide without sliding the carousel 🤔

From the version 4.1, the omitEnd option allows you to omit these dots, and also disable the next arrow when the carousel reaches where there is no space to go further.

As an aside, this option also works with fixedWidth and autoWidth (but make sure to provide focus together).

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`	An UL element.
`items`	`PaginationItem[]`	An array with PaginationItem objects.

The PaginationItem contains properties for each indicator dot:

`li`	`HTMLLIElement`	A list item element.
`button`	`HTMLButtonElement`	A button element for a dot.
`page`	`number`	A page index.