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:
- 01
- 02
- 03
- 04
- 05
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 |