Slider

Usage

Slider is a carousel that holds Hero and Section slides. Because a Section can hold any other block, you can build a hero banner slider, a testimonial carousel, or a rotating set of features.

The block starts with two Hero slides. Use Add Slide (shown when the Slider or one of its slides is selected) to add more.

Don't put essential content on later slides. Most visitors never move past the first one.

Slides

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

• Hero slides — headline, subheadline, button, background, height, text color, and so on
• Section slides — any blocks you like, with the Section's background and layout options

The slider resizes to fit each slide, so keep Section slides about the same height to avoid the page jumping as slides change.

Slider settings

In Slider Settings:

• Autoplay — advances slides automatically
• Autoplay interval (seconds) — time between slides (1–10 seconds)
• Pause on hover — pauses autoplay while the cursor is over the slider
• Bottom Navigation — places the arrows and dots under the slides

Visitors can swipe or use the dots to move between slides. After the last slide, the slider loops back to the first.

At the top of a page

A Slider of Hero slides at the top of a page works with seamless navigation the same way a single Hero does.

When navigation is set to Seamless in the Customizer, the header's text color follows the current slide. A Hero with boxed content on a background color switches the header to light text. As slides change, the header updates to match.

Block width

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

Tips

• Use the same text color on every Hero slide at the top of the page so the header stays consistent.
• Use Section slides for a testimonial carousel or content that isn't a classic hero banner.
• Turn on Pause on hover with autoplay so visitors can finish reading a slide.
• With autoplay on, slides don't replay their scroll-in animation each time they come back around.