Focus List Carousel

Code Toolkit
Written By Squarestylist Support

What You'll Create

A centered carousel where the active slide scales larger than surrounding items, with content overlay positioned at the bottom of each slide.

The Problem It Solves

Default carousels show all items at the same size. This technique creates a "focus" effect where the center item is prominently displayed while adjacent items appear smaller.

Perfect For

Portfolio showcases, Featured projects, Product highlights, Team spotlights, Service presentations.

What Makes This Different

CSS transform scaling creates size differentiation between active and inactive slides. Content is absolutely positioned over images. Inactive slides hide their content for cleaner presentation.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: List Section set to Carousel layout

  • Toolkit Title: Focus List 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

Simple Mega Menu from Footer
Next

Minimal Focus Carousel with Counters