SlowlySlider
A carousel of slides the visitor moves through one at a time.
The Slider block is a carousel, a row of slides the visitor moves through one at a time. It suits testimonials, featured items, and image sequences where you want the visitor to focus on one panel before moving to the next.
It comes as two blocks: the Slider is the carousel wrapper, and each Slide inside it is one panel you fill with any content. Set the navigation, the dots, and the timing on the slider, and build each slide like any other layout block.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "slider".
- Pick the Slider block, then add Slide blocks inside it.
Settings
In the slider's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Direction | Horizontal or vertical axis for slide movement | Vertical suits full-screen storytelling layouts |
| Slides per view | How many slides are visible at once, per breakpoint | Showing partial next slides to hint there is more |
| Space between | Gap between slides in pixels, per breakpoint | Giving card-style slides room to breathe |
| Loop | Wraps the last slide back to the first seamlessly | Autoplay galleries and testimonials that run continuously |
| Autoplay | Advances slides automatically after a set duration | Image galleries that move on their own |
| Autoplay duration | Time in milliseconds between advances (default 3000) | Slowing a busy slide or speeding a quick one |
| Pause on hover | Stops autoplay while the pointer is over the slider | Any autoplay slider, gives visitors time to read |
| Transition duration | Length of the slide animation in milliseconds | Matching the pace to the surrounding design |
| Navigation arrows | Shows previous and next arrow buttons | Any slider where you want explicit controls |
| Dots | Shows a dot indicator row below the slides | Helping visitors see how many slides there are |
| Fade | Cross-fades between slides instead of sliding | Single-slide-at-a-time displays, avoids lateral motion |
| Draggable | Lets visitors drag to advance slides | Touch-friendly carousels and image galleries |
| Free scroll | Removes the snap-to-slide constraint while dragging | Continuous image strips, not panel-by-panel reading |
| Adaptive height | Resizes the slider height to match the active slide | Slides with varied content height |
| Grab cursor | Shows a grab cursor on hover to signal draggability | When draggable is on and the interaction is not obvious |
Styling
The slider uses the shared design panel for spacing, colour, borders, and effects. Arrow colour, background, and radius are in the slider's own panel alongside the controls above. Style the Slide blocks separately to control each panel's look. The states panel is where you set the arrow hover appearance.
Accessibility
Carousels move content, which creates two concerns. First, if autoplay is on, some visitors cannot read a slide before it advances; pause on hover helps, but a manual control is kinder. Second, rotating content can trigger vestibular discomfort: respect the visitor's prefers-reduced-motion preference by keeping transition durations short or offering a way to stop movement. Navigation arrows need accessible labels so keyboard and screen-reader users can move between slides without relying on the visual icon alone.