Horizontal Scrolling Gallery

What You'll Create

A gallery that scrolls horizontally as visitors scroll down the page. Images move sideways in a cinematic, editorial style while the page itself scrolls vertically - creating an unexpected, immersive browsing experience.

The Problem It Solves

Squarespace galleries scroll vertically by default, which is standard but predictable. When you want that high-end, editorial feel where images flow horizontally as visitors scroll down, you need custom JavaScript to hijack the scroll behavior and CSS to lay out images in a horizontal strip.

Perfect For

Portfolio showcases, Photography collections, Project case studies, Editorial layouts, Agency work displays.

What Makes This Different

The script calculates the total width of all images and sets the section height accordingly, creating a scrollable container. As visitors scroll down the page, JavaScript translates that vertical scroll into horizontal movement. The effect includes optional styling for borders, counters, and alternating image positions. On touch devices and tablets, the layout gracefully falls back to a standard stacked view.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: List Section with anchor ID #horizontal, Space below title value set to 43

• Toolkit Title: Horizontal Scrolling Gallery

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