Carousel Block

The Carousel block turns a group of images into a focused visual sequence. Use it for project highlights, product views, destinations, collections, or any story where visitors benefit from moving through related media.

Choose one purpose for the sequence, keep the image treatment consistent, and use captions only when they add information that the image cannot communicate alone.

Properties

Select the Carousel and open Edit block. Configure the slides first, then choose the variation, layout controls, and motion that support the content.

The Content area contains the complete slide list and the controls that define how many images appear at once.

Slides

Use Add slide to upload an image or choose one from the site. Each card represents one slide. Drag the handle to reorder the sequence, open a card to edit its details, and use × to remove it.

Order the slides deliberately: lead with the strongest image, group related views together, and avoid near-duplicates that make the sequence feel longer without adding information.

Variation

Slider moves between discrete groups of slides. Center Peek leaves part of the neighboring slides visible as a navigation cue. Continuous Rolling creates an uninterrupted horizontal stream for decorative or ambient media.

Slides per view and gap

Slides Per View controls density on desktop, while Tablet Slides Per View and Mobile Slides Per View let the composition simplify at narrower widths. Gap sets the space between images; use one consistent value that keeps the slides distinct without breaking the sequence.

Editing a slide

Open a slide card to work on the image itself and the information attached to it.

Crop and focal point

Use Crop to choose the part of the image that must remain visible. Set the focal point on the subject rather than accepting the center by default, then verify the crop again at tablet and mobile widths.

Alternative text and caption

Alt describes the image when it carries meaning. Caption is visible copy for the visitor; use it to identify a project, place, product view, or idea without repeating the alternative text word for word.

Link

Add a Link only when the slide has a clear destination. Enable Open in new tab for an external destination when appropriate, and make sure the caption or surrounding context explains what opens.

Layout

Image shape

Image Shape applies a consistent mask to every slide. Select a shape that suits the media and confirm that important subjects remain inside it across the complete sequence.

Navigation controls

Show Arrows adds manual previous and next controls. Arrow Style changes their visual language, while Arrows Position places the pair inside, outside, or at a chosen corner when the selected variation supports it. Show Dots adds a compact position indicator.

Caption style

Overlay places the caption on the image and needs reliable contrast against every crop. Below Image keeps the text on the page surface and is a safer choice for longer or more important captions.

Behavior

Autoplay and pause

Autoplay advances Slider or Center Peek automatically. Autoplay Speed controls the time between moves, and Pause On Hover lets pointer users stop the sequence while they inspect a slide.

Loop and scroll control

Loop returns to the beginning after the last slide. Loop On Scroll pins the Slider and converts vertical page scroll into horizontal travel; use it only when that stronger interaction is central to the page. Continuous Rolling uses Rolling Pace instead, with Pause On Hover available when needed.

Transition

Duration sets how long a slide movement takes. Smooth works for most editorial sequences, Linear creates a constant-rate move, and Linear Continuous supports uninterrupted motion.

Style Panel

Open Style Panel and keep the target set to Carousel. Build the stable Default state first so every slide and control sits on a coherent visual foundation.

Default state

Use Spacing to control the block inset and outer rhythm. Background, Borders, Typography, and Effects shape the shared carousel surface. Prefer theme tokens, subtle borders, and restrained effects that remain compatible with every image in the sequence.

Typography and effects

Typography affects the supported carousel text treatment, including captions. Effects can add shadow or visual separation, but they should never compete with the slides or weaken control visibility.

On Hover

Switch the Style Panel state from Default to On Hover to author only the changes that appear during pointer interaction.

Meaningful hover feedback

A small border, shadow, transform, or transition can confirm that the carousel is interactive. Keep the difference subtle, avoid moving the block enough to disturb nearby content, and preserve the same readable contrast as the default state.

Responsive styling

Tablet and Mobile keep their own layout and sizing overrides. Do not rely on hover as the only interaction cue on touch devices, and recheck all four padding sides whenever a background or border creates a bounded surface.

Live example

This live example uses three slides on desktop, two on tablet, and one on mobile. The sequence loops, captions remain readable over the images, and manual arrows keep control with the visitor.

Property summary

Content: Slides, Variation, Slides Per View, Gap, Tablet Slides Per View, Mobile Slides Per View, and Portrait Format for Continuous Rolling.

Layout: Image Shape, Show Arrows, Arrow Style, Arrows Position, Show Dots, and Caption Style.

Behavior and transition: Autoplay, Autoplay Speed, Pause On Hover, Loop, Loop On Scroll, Rolling Pace, Scroll Strength, Duration, and Easing.

Responsive behavior

Set the desktop composition first, then reduce Slides Per View where tablet or mobile images become too narrow. Check caption wrapping, crop, arrow position, and touch targets at every breakpoint.

Carousel is frame-driven inside a grid section. Choose its height from the intended crop and aspect ratio; use section padding and gaps for surrounding whitespace instead of leaving empty grid rows.

Accessibility

Write useful alternative text for meaningful images, keep captions concise, preserve visible keyboard focus, and verify that every arrow can be reached and activated without a pointer.

Autoplay should never move so quickly that content cannot be understood. Pause On Hover helps pointer users, but important information should remain available without depending on timing or motion.

Common mistakes

Avoid mixing unrelated aspect ratios without checking the crop, showing too many small slides, repeating the same caption, placing arrows outside a narrow frame, or using continuous motion for content visitors must read carefully.