Simple Slideshow with Numbered Navigation

Code Toolkit
Written By Squarestylist Support

What You'll Create

A refined gallery slideshow where thumbnail images are replaced with numbered indicators (01, 02, 03, etc.). The active slide number is underlined, making navigation elegant and minimal while maintaining functionality.

The Problem It Solves

Squarespace's default slideshow thumbnails can look cluttered and distract from the main image. This technique swaps those thumbnails for clean numbered navigation, giving your galleries a more editorial, high-end feel.

Perfect For

Portfolio galleries, Project showcases, Editorial layouts, Photography sites, Case study presentations

What Makes This Different

Instead of tiny preview images that compete for attention, visitors see simple numbers that count up automatically. The active number gets underlined so it's always clear which slide you're viewing. This creates a much cleaner look while keeping navigation intuitive.

Details

  • Section Type: Classic

  • Code Type: CSS

  • Prerequisites: Gallery Section set to Slideshow Simple, Controls Location set to Side, Thumbnails toggled on

  • Toolkit Title: Simple Slideshow with Counters

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

List to Table Converter
Next

Editorial Header with Stacked Navigation