Focus Carousel Summary Block

What You'll Create

A centered carousel-style summary block where the active item is larger and centered while neighboring items peek in from the sides. Swiper navigation arrows and smooth transitions between items create a polished browsing experience.

The Problem It Solves

Standard summary blocks display items in flat grids or simple carousels. This technique creates a focus effect where the current item commands attention while providing visual context of what's next - like a spotlight on stage.

Perfect For

Featured blog posts, Testimonial showcases, Project highlights, Product features, Team member spotlights.

What Makes This Different

The Swiper library powers smooth carousel functionality with centered slides that appear larger than side items. Code transforms the standard summary block structure into a carousel-compatible format. Styling creates the navigation arrows, size difference between active and inactive items, and elegant content card overlay.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Grid summary block with anchor link '#sumfocus' on section

• Toolkit Title: Focus Summary Block

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