Stylish Testimonial Slider

What You'll Create

Transform your Squarespace list carousel into a polished testimonial slider with circular avatar images, reordered content hierarchy placing names above descriptions, and elegant bordered card containers with generous padding.

The Problem It Solves

Squarespace's default list carousel displays testimonials with a standard layout that lacks visual hierarchy and polish. The avatar images appear rectangular, content flows in a fixed order, and there's no visual separation between testimonial cards. This CSS reorganizes the entire structure using display:contents and order properties to create a professional testimonial display.

Perfect For

Service providers showcasing client feedback, coaches displaying student success stories, agencies featuring case study quotes, consultants building social proof, creative professionals highlighting collaborator praise.

What Makes This Different

This technique targets only specific carousels using the 27% media width setting as a precise selector. Breaks apart the default container structure to allow full reorganization. Reorders content placement without any scripting required. Creates perfectly circular avatars from your list images. Adds bordered cards with generous 3rem padding for visual separation between testimonials.

Details

• Section Type: Fluid Engine

• Code Type: CSS + JavaScript

• Prerequisites: List Section Carousel with media width set to 27%

• Toolkit Title: Stylish Testimonial Slider

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