Slider

Usage

Slider is a parent carousel that holds Hero and Section slides (ds/hero and ds/background). Because Section can nest any other block, you can build quote carousels, feature rotators, or mixed content slides — not just hero banners.

The block inserts with two Hero slides by default. Use Add Slide (visible when the Slider or any child is selected) to add more.

Do not rely on carousels for mission-critical content — most users will not advance past the first slide.

Slides

Each slide is a full Hero or Section block with its own settings:

• Hero slides — headline, subheadline, button, background, height, reverse print, etc.
• Section slides — any inner blocks with Section background and layout options

When using Section slides, keep slide heights consistent to reduce jarring jumps — the carousel uses adaptive height and will resize as slides change.

Slider settings

Parent controls in Slider Settings:

• Autoplay — automatically advance slides on the front end
• Autoplay interval (seconds) — delay between slides (1–10 seconds)
• Pause on hover — pause autoplay while the cursor is over the carousel

On the front end, visitors swipe or use dot navigation to move between slides. Slides wrap around infinitely.

Top of page and seamless navigation

A Slider filled with Hero blocks at the top of a page follows the same seamless navigation pattern as a standalone Hero.

When navigation is set to Seamless in the Customizer, the masthead reverse print state follows the active slide — including boxed Hero content with a background color, which defaults the header to reverse print. As slides change, the navigation updates to match each slide's text treatment.

Block width

Slider supports Wide and Full alignment from the block toolbar and defaults to Full width.

Tips

• Hero sliders at the top of the page are the most common pattern — match reverse print across slides for a consistent header.
• Use Section slides for quote carousels or content that is not a traditional hero layout.
• Enable Pause on hover when autoplay is on so readers can finish reading a slide.
• Autoplay disables scroll-in animations on slides so content does not re-animate every time Flickity cycles back to a slide.