Summary Carousel Slide Counter

What You'll Create

Automatic slide numbering for your Squarespace Summary Block carousel that displays as '01', '02', '03' etc. Numbers update automatically as you add or remove items—no manual editing required.

The Problem It Solves

Squarespace's carousel pagination uses dots by default. If you want numbered slides for a more editorial or portfolio feel, you'd typically need JavaScript. CSS counters provide a pure-CSS solution.

Perfect For

Portfolio carousels, testimonial sliders, featured post rotators, product showcases, case study presentations

What Makes This Different

Uses counter-reset on the parent container and counter-increment on each slide. The content: "0" counter(tabs-numbers) property generates zero-padded numbers. Positioned absolutely for precise placement.

Details

• Section Type: Classic

• Code Type: CSS

• Prerequisites: Summary Block in carousel layout

• Toolkit Title: Summary Carousel with Counter

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support