Storyboard Slider

Usage

Storyboard Slider presents a sequence of large, photo-driven slides visitors swipe or click through — ideal for walking viewers through a narrative, case study, portfolio story, or multi-step message.

Each slide is a full card with a background image, optional color overlay, and positioned headline, subheadline, body, and link. Slides can look different from one another while sharing the same parent layout settings.

On the front end, slides render as a Flickity carousel with bottom navigation. In the editor, all slides stack vertically so you can edit every slide at once without hunting through a preview carousel.

Parent settings

Select the Storyboard Slider block for block-wide options:

• Slide Position — Center (default) or Left. Sets how slides align within the carousel viewport (cellAlign in Flickity).
• Wraparound — when enabled (default), the carousel loops from the last slide back to the first.
• Corners — Rounded (default) or Sharp corner treatment on each slide card.

Slides repeater

Use Add Slide to build your story. Each slide includes content, typography, layout, and background controls.

Content

• Headline — main title (default placeholder: "Write a headline for this story."). Rendered as h2.
• Subheadline — optional supporting line, rendered as h4.
• Body — rich text with the Dirigible toolbar (no media upload).
• Link — optional ACF link field for a call to action below the body.

Typography (conditional)

These appear when the related field has content:

• Headline Style — Customizer typography preset for the headline (h1–h6, default h2). Visual only — tag stays h2.
• Subheadline Style — preset for the subheadline (default h4). Visual only — tag stays h4.
• Link Style — Understated (default), Button, Alternate, or Hollow.

Layout

• Text Placement — nine-position grid placing copy within the slide on desktop (default lower-right: text-right text-bottom). Also sets text alignment — e.g. lower-right uses right-aligned text. On mobile, right-aligned placement reverts to left alignment for readability; the image stacks above the copy instead of sitting behind it.
• Reverse Print — toggles light text on dark backgrounds (default on). When off, the slide falls back to a light background treatment.

Background

• BG Image — full-slide background photo (desktop overlay; stacked above copy on mobile).
• Background Origin — nine-position focal point for the background image (default center).
• BG Overlay — color wash over the photo (default Primary). Choices come from your theme overlay palette.
• Overlay Opacity — overlay strength from 0–100 in steps of 5 (default 40).

Front-end behavior

The carousel uses Flickity with adaptive height, contain, and accessibility enabled. Bottom navigation dots let visitors move between slides. There is no autoplay — visitors control progression.

The block script manages focus and aria-hidden so only the active slide is keyboard-accessible. Tabbing into a link on an inactive slide advances the carousel to that slide.

Editor behavior

editor.css stacks slides vertically with spacing so every slide is visible and editable in one view. This differs intentionally from the front-end carousel experience described in the block excerpt.

Block width

Storyboard Slider supports Wide and Full alignment and defaults to Full width — suited to immersive, edge-to-edge story slides.

Tips

• Give each slide a strong BG Image — the block is built for photography-forward storytelling.
• Use Text Placement and Reverse Print together so copy stays readable over busy photos; increase Overlay Opacity when needed.
• Differentiate slides with varied overlay colors and text positions while keeping Corners consistent at the parent level.
• For autoplaying logo strips, use Logo Carousel. For child-block slide editing in the canvas, consider Slideshow.