Gallery Slideshow with Counter

Code Toolkit
Written By Squarestylist Support

What You'll Create

A gallery slideshow with slide counter and custom navigation arrows. Displays current slide number out of total (like "3/13") with repositioned, centered arrow controls.

The Problem It Solves

Default gallery blocks lack slide counters, making it unclear how many images exist in a slideshow. This technique adds a professional counter and relocates navigation arrows for a cleaner, more intuitive interface.

Perfect For

Blog post galleries, Portfolio project pages, Case study presentations, Editorial layouts, Photo essays.

What Makes This Different

CSS counter automatically tracks and displays slide numbers. Arrow controls are repositioned from sides to centered bottom using flexbox. Gallery height is set to full viewport for immersive viewing.

Details

  • Section Type: Classic

  • Code Type: CSS

  • Prerequisites: Stacked gallery block on a blog post or page

  • Toolkit Title: Slideshow Gallery Carousel

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

Inline Text and Images Layout
Next

External Platform Button on Product Page