The Carousel block scrolls a series of items on one line: a strip of logos, cards or a gallery. This page describes its four scroll modes, the settings of each, auto-fit and its keyboard behavior.
Add the block
Insert the Carousel block (Add a block). It contains a Carousel track, the row where you place your items: logos, cards or photos. On the track, the Add media button in the toolbar adds images or videos from the media library.
The track is a grid. The width of its items is set with the usual size controls (Set size, borders and effects). To space the items apart, apply the registered style Spaced to the track, a gap of 8 px (Space your blocks).
A Slideshow shows one slide at a time. The carousel lets you see several items side by side.
Choose a scroll mode
Select the Carousel block, open the Settings tab then the Carousel settings panel. The first setting, Scroll mode, drives the others.
| Mode | Behavior |
|---|---|
| Automatic | The track moves on its own, continuously, like a ribbon. This is the mode of an inserted carousel. |
| Manual | The visitor moves the track with the previous and next arrows. |
| On scroll | The carousel stops on screen and its track advances at the pace of the page’s scrolling. |
| Swipe (snap) | The visitor drags the track with a finger or the mouse. It snaps to an item when it stops. |
The settings of each mode
Automatic
| Setting | Effect | Default value |
|---|---|---|
| Direction | Right to left or Left to right. | Left to right |
| Pause on hover | Stops the track while the pointer is over it. | Off |
| Speed (px/s) | The pixels covered per second, from 20 to 2,000. 200 is slow and calm, 800 fast. | 200 |
| Auto adapt | Only scrolls the track if its items do not all fit in the frame. Otherwise, they stay fixed. | Off |
The ribbon stops when the visitor touches it with a finger or when the keyboard reaches a link it contains. A second touch restarts it.
Manual
| Setting | Effect | Default value |
|---|---|---|
| Infinite loop | On, the carousel loops seamlessly. Off, navigation stops at the first and last items. | On |
| Auto adapt | Only scrolls the track if its items do not all fit in the frame. | Off |
Without a loop, an arrow that reaches the end of its travel becomes inactive and does nothing. A screen reader announces it as disabled and it stays reachable by keyboard. To style it, select the Navigation button and choose the Disabled state in the Styles tab. An opacity of 40% dims it, for example.
On scroll
| Setting | Effect | Default value |
|---|---|---|
| Direction | Right to left or Left to right. The start and end positions follow. | Left to right |
| Positions measured on | The track’s width: at -100%, the track leaves the screen entirely. This choice suits an object that crosses. The carousel’s edges: on all screens, the track starts at the carousel’s left edge at 0% and ends at the right edge at -100%. | The track’s width |
| Start position (%) and End position (%) | Where the track is at the start and end of the movement, from -100 to 100. | -100 and 100 from left to right, 100 and -100 from right to left |
| Scroll speed (×) | The distance covered by the track for each pixel scrolled, from 0.25 to 4 in steps of 0.25. 1 advances as much as the page, 2 twice as much. | 1 |
| Stays on screen | At the top of the screen or At a set height: where the carousel stops while its track advances. | At the top of the screen |
| Middle at (% from the top) | The screen height where the middle of the carousel stops, from 10 to 90 in steps of 10. 50 is the center. With At a set height. | 50 |
- Everything that follows the carousel in the same container stays on screen with it. Place the next section in this container: the visitor sees it under the track while it scrolls.
- Once the track reaches the end, the page resumes its scrolling.
- A carousel taller than the screen stops at the top. It realigns when the page changes: an image that arrives or a rotated screen. On a phone, the address bar appearing or disappearing does not move it.
Swipe (snapping)
| Setting | Effect | Default value |
|---|---|---|
| Swipe axis | Horizontal or Vertical. | Horizontal |
| Snap strictness | Always snap (mandatory): the track always snaps to an item. Snap when close (proximity): it only snaps if it stops near an item. | Always snap (mandatory) |
| Snap alignment | Where the item snaps in the frame: Start, Center or End. | Center |
This mode uses the browser’s scrolling and needs no script. It adapts by itself to the available space and has no Auto adapt setting.
Auto-fit
With Auto adapt, in Automatic or Manual mode, the carousel only scrolls if its items overflow the frame. On a large screen where everything fits, it becomes a fixed, centered row, with no arrows. On a small screen, it becomes scrollable again. It measures its width and height again when images and fonts have finished loading.
The setting does not exist in On scroll mode or in Swipe (snap) mode.
On a phone
- In Automatic mode, a finger touch stops the ribbon and a second one restarts it.
- In Swipe (snap) mode, the visitor drags the track with a finger.
- With Auto adapt, a row that is fixed on a computer becomes scrollable on a phone, with no per-screen setting.
Accessibility
- For a visitor who asks for less motion, through their system or through the Animation switcher, the ribbon in Automatic mode stays still. In On scroll mode, nothing stops or moves with the page: the track is dragged with a finger and each item stays reachable.
- The previous and next arrows are activated by keyboard, with
EnterorSpace. - The Navigation button has five states to style: Default, Hover, Focus, Active and Disabled.