Gallery Slideshow Horizontal Counter

Code Toolkit
Written By Squarestylist Support

What You'll Create

A sleek numbered counter navigation in Squarespace that replaces default bullet indicators on fullscreen slideshows. Each slide displays as "01", "02", "03" etc., with the active slide highlighted in a contrasting color with an underline.

The Problem It Solves

Squarespace's default slideshow bullets are small and generic. This technique transforms pagination into a design element with numbered slides that give visitors context about gallery size and position.

Perfect For

Portfolio slideshows, image galleries, product showcases, case study presentations, photography portfolios.

What Makes This Different

Automatically generates sequential numbers with leading zeros for each slide. Numbers scale responsively between 1rem and 3rem based on screen size. Spacing set to 2rem between counters. Active slide displays in yellow with a 2px bottom border. Default bullets removed and replaced with clean, numbered indicators.

Details

  • Section Type: Fluid & Classic

  • Code Type: CSS

  • Prerequisites: Gallery Section with Slideshow:full type, Bullet navigation enabled, Captions turned off. CSS in Custom CSS panel.

  • Toolkit Title: Slideshow Horizontal 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

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Product and Blog Subtitles
Next

Curved Wave Headers