How to make slide paginations numbers instead of dots

How To
1

Hi

I’m using a nestable slider, but I’d like to have numbered pagination instead of dots. Can anyone think of a way?

Vik

2

Answered my own question for the second time today!

I added a :before pseudo element to the pagination dots, targeting the individual dots using the aria label to distinguish them from each other. Then I added (e.g) content: “1” in the css and made the dots themselves height:0;

.splide__pagination__page[aria-label=“Go to slide 1”]:before {
content:“1”
}

.splide__pagination__page[aria-label=“Go to slide 2”]:before {
content:“2”
}

.splide__pagination__page:not(.is-active):before {
text-decoration: underline;
color: #A50910;
}

.splide__pagination li[role=“presentation”] .splide__pagination__page {
height: 0;
}

3

There is a better way to do this. It’s just CSS and it adds the number of pages automatically so you don’t have to hardcode it. Look:

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

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

That’s brilliant @divadyx Thanks!