How to Show Slide Pagination Numbers Instead of Dots in Bricks Builder

By default, the slider in Bricks Builder (powered by Splide) shows dots for pagination.

But what if you want numbers instead of dots?

Here’s the easiest way to do it using just CSS.

Step 1: Add Your Slider

Create your slider using the Bricks Builder carousel element.
Make sure pagination is enabled.

Step 2: Add This CSS Code

Paste the following CSS into your page settings or Bricks custom CSS area:

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

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

What This Does

• The first part resets the counter
• The second part replaces each dot with a number
• It auto-generates numbers based on how many slides you have
• No need to manually write numbers

Bonus Tips

• You can style the numbers like any other text
• Add padding, background, or borders as you like
• This works with any Splide slider in Bricks

That’s it! Now your slider shows numbers instead of dots — clean, simple, and automatic.