Carousel

The Carousel block puts a set of images on the page as either a slideshow that advances one frame at a time or a scrolling row of cards readers can swipe through. Reach for it when you have several images to show in the same space — production photos, a partner line-up, a set of shots from one event.

Choosing the images

The Upload By option sets where the images come from:

• Manual (default) — build the list yourself. Add each image and set its Image Fit to Cover (fills the frame, may crop) or Contain (shows the whole image, may letterbox).
• Folder — point the block at a folder in your media library and it shows every image in that folder. Images appear in upload order, up to a maximum of 60.

Two toggles control the labels shown with each image, both off by default:

• Show Caption — display the caption saved with the image.
• Show Credit — display the credit saved with the image.

Captions and credits are taken from the image's details in the media library, so set them there once and they follow the image wherever it appears.

Choosing the style

The block has two styles, picked at the top of the block. Slideshow is the default.

Slideshow

A framed slideshow that advances through the images.

• Slides Per View — show 1 (default), 2, 3, or 4 images at once.
• Orientation — Horizontal (default) or Vertical.
• Transition — how one slide changes to the next: None, Slide (default), or Fade. Available only when showing one slide at a time.
• Autoplay — advance automatically. On by default.
• Show Progress — show a progress indicator. On by default.

A Navigation group controls the controls readers use to move between slides:

• Position — place the controls Overlay (default, over the image) or Below it.
• Show Arrows — show previous/next arrows. On by default.
• Arrow Style — None (default), Filled, or Outlined.
• Show Indicators — show the row of dots marking each slide. On by default.
• Indicator Width — Small (default), Medium, Large, or Full. Shown when indicators are on.
• Indicator Style — None, Filled (default), or Outlined. Shown when indicators are on.

The Layout tab sets the slideshow's height and its caption display. Height is Auto by default, or Small, Medium, Large, Full, or Custom — choose Custom to set an exact height. The caption settings are Caption Position (Below by default, or Right / Left), Caption Style (Small by default, P, or H6), and — when the caption sits to the side — Caption Alignment (Top, Centre by default, or Bottom).

Scroller

A swipeable row of image cards.

• Layout — Center Peek (default, centres the focused card and peeks the neighbours) or Left Row (a left-aligned row).
• Cards Per Screen — how many cards fit across, 1 to 6 (default 3).
• Cards Per Screen (Mobile) — the same for phones, 1 (default) to 3.
• Gap — the space between cards, from 0 to 80 px in steps of 4 (default 16).
• Full Bleed — let the row run edge to edge. Off by default.
• Autoplay — scroll automatically. Off by default.
• Show Arrows — show previous/next arrows. On by default.
• Show Indicators — show position dots. Off by default.

With Show Arrows on, a Navigation group fine-tunes the arrows: Arrow Appearance (Basic by default, Square, Rounded), Arrow Placement (Top by default, Bottom, Center), and Arrow Position (Outside by default, Overlay). Arrow Fill (Solid by default, Bordered) and Arrow Color appear once Arrow Appearance is Square or Rounded, and Arrow Alignment (Left, Right by default, Space Between) appears when Arrow Placement is Bottom or Center.

On the Appearance tab, Image Effect sets how focused and unfocused cards differ: None (default), Dim (fades unfocused images to half opacity), and Scale (grows the focused image slightly). You can apply more than one effect at once. The Layout tab sets the Caption Style for this style (Small, P by default, or H6).

Shared controls

Beyond the options above, the Carousel uses the standard block controls.

• Layout controls — set the container width and overall placement.
• Spacing and padding — adjust the margin and padding around the block.
• Colour scheme in blocks — set the colour scheme, or custom background and text colours, for captions and controls.
• Analytics keys — tag the carousel for reporting.

Example

To show a wall of production photos that readers can browse at their own pace, add a Carousel and choose the Scroller style. Set Upload By to Folder and pick the folder holding the shots, so new uploads appear automatically. Keep Layout on Center Peek, set Cards Per Screen to 3 (and 1 for mobile), and turn on Dim under Image Effect so the side images recede and the centre photo draws the eye. Turn on Show Caption to print each photo's caption underneath.

Where to go next