Quote Slider

Usage

Quote Slider rotates through quote or testimonial cards in a centered Flickity carousel. Each slide shows a large quotation mark, rich-text quote body, and an optional citation with name, title, and headshot.

The layout peeks adjacent slides at the edges so visitors see there is more content to browse — specialized for testimonials rather than general-purpose sliders.

In the editor, all slides display at once in a wrapped grid with a note that the live site shows a single-row carousel. On the front end, slides advance via bottom navigation dots (or autoplay when enabled) and can be dragged.

Parent settings

Select the Quote Slider block for carousel-wide options:

• Wraparound — when enabled (default), the carousel loops from the last slide back to the first.
• Autoplay — off by default. When enabled, slides advance automatically.
• Autoplay Interval — seconds between transitions (0.1–10, default 3). Appears only when Autoplay is on.

When Autoplay is off, visitors drag slides or use navigation dots to change quotes.

Flickity runs with cellAlign: center, adaptive height, and draggable enabled. Slide width is 90% of the viewport on small screens and matches your theme Content Width (Customizer) on larger breakpoints.

Slides repeater

Use Add Slide to create quote cards. Each row includes:

• Quote — rich text for the quotation (Dirigible toolbar, no media upload). Default sample text is provided.
• Citation Name — speaker name (default placeholder: "Mark Twain"). Rendered as h4 in the cite line.
• Citation Title — role or affiliation below the name (default: "Writer").
• Citation Headshot — optional circular photo beside the citation.
• Background — slide panel color from the theme overlay palette (default Primary).
• Reverse Print — light text on dark backgrounds (default on). Prefer this over manually coloring individual text blocks.

Each slide renders as a rounded card with a decorative quotation-mark icon, padded quote body, and centered (or left-aligned with headshot) citation block.

Block width

Quote Slider supports Wide and Full alignment and defaults to Full width — suited to testimonial bands that span the page.

Tips

• Keep quotes concise — slide width caps at your theme content width on desktop.
• Add a Citation Headshot for testimonials; name-only citations center-align automatically.
• Match Background and Reverse Print per slide when mixing light and dark cards in one slider.
• For freeform block content in slides, use Slideshow. For logo strips, use Logo Carousel.