# Carousel

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](https://lovelyrender.com/documentation/add-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](https://lovelyrender.com/documentation/size-borders-effects/)). To space the items apart, apply the registered style **Spaced** to the track, a gap of 8 px ([Space your blocks](https://lovelyrender.com/documentation/space-blocks/)).

A [Slideshow](https://lovelyrender.com/documentation/slider-block/) 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.

**Tip:** For cards that scroll in the middle of the screen, from the first item to the last, measure the positions on **The carousel’s edges**, from 0 to -100. Choose **At a set height** and leave 50. If the scrolling is too long, raise **Scroll speed (×)**.

### 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** |

![The Carousel settings panel in Swipe (snapping) mode: Swipe axis set to Horizontal, Snap strength set to Snap when close and Snap alignment set to Center.](https://static.lovelyrender.com/uploads/2026/10/205-blocs-carrousel.png)

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](https://lovelyrender.com/documentation/appearance-motion-switchers/), 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 `Enter` or `Space`.
- The **Navigation button** has five states to style: **Default**, **Hover**, **Focus**, **Active** and **Disabled**.

## See also

- [Slider](https://lovelyrender.com/documentation/slider-block/)
- [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/)
- [Space out your blocks](https://lovelyrender.com/documentation/space-blocks/)