> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/layout/carousel.md).

# Carousel

A horizontal slider that shows its child **Slide** blocks a few at a time, with navigation, pagination, and autoplay.

## Settings

| Setting                | Description                                                                                                                                                                               |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Columns                | How many slides show at once — **Desktop columns** and **Mobile columns**.                                                                                                                |
| Enable overflow slider | Lets the next slide peek in from the edge.                                                                                                                                                |
| Custom columns         | Set the column count per breakpoint yourself.                                                                                                                                             |
| Gap                    | Space between slides — set separately for desktop and mobile.                                                                                                                             |
| Size                   | **Desktop width** — span the full width, or set a **Custom** percentage.                                                                                                                  |
| Navigation             | Previous / next arrows on desktop, with **Position** (outside or over the slides), **Style**, **Icon**, and hover-or-always **Behavior**.                                                 |
| Pagination             | Show **dots** or a **progress bar**, toggled per breakpoint, with spacing between the slides and the pagination, and an optional **Limit width** / **Max width** cap on the progress bar. |
| Autoplay               | Advance slides automatically at a set **Speed**, and can **Pause on hover**. Disabled automatically under reduced motion.                                                                 |
| Padding                | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**.                                                                                                    |

## Available blocks

### Slide

A single slide inside a Carousel. Each slide is a mini layout container — set its content direction, alignment, background, and link, then fill it with nested blocks.

#### Slide Settings

| Setting    | Description                                                                                              |
| ---------- | -------------------------------------------------------------------------------------------------------- |
| Direction  | Arrange content as a **row** or **column**, with alignment along both axes and mobile stacking for rows. |
| Gap        | Space between nested blocks — desktop and mobile.                                                        |
| Height     | **Fit** the content or **Fill** the slide.                                                               |
| Appearance | Border thickness, corner radius, and shadow.                                                             |
| Background | **Media** (None, Image, Video), overlay color, and backdrop blur.                                        |
| Color      | **Inherit** the section's color scheme, or apply a separate **Color scheme**.                            |
| Link       | Wrap the whole slide in a link, optionally opening in a new tab.                                         |
| Padding    | Outer spacing on all four sides, with independent mobile values via **Custom for mobile**.               |

#### Slide Blocks

Blocks you can add inside a Slide.

| Block                                                                      | Description                                                                                                                                                     |
| -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)                            | Main headline.                                                                                                                                                  |
| [Subheading](/helix/theme-blocks/basic/subheading.md)                      | Small label above or below the heading.                                                                                                                         |
| [Text](/helix/theme-blocks/basic/text.md)                                  | Rich-text paragraph for supporting copy.                                                                                                                        |
| [Button](/helix/theme-blocks/basic/button.md)                              | Single call-to-action with label, link, and style.                                                                                                              |
| [Buttons](/helix/theme-blocks/basic/buttons.md)                            | Two side-by-side buttons.                                                                                                                                       |
| [Image](/helix/theme-blocks/basic/image.md)                                | Inline image within the content, such as a logo or badge.                                                                                                       |
| [Image comparison](/helix/theme-blocks/basic/image-comparison.md)          | Before-and-after images with a draggable handle.                                                                                                                |
| [Video](/helix/theme-blocks/basic/video.md)                                | Uploaded or external video with a play button.                                                                                                                  |
| [Icon](/helix/theme-blocks/basic/icon.md)                                  | An icon from the theme library, shown inline.                                                                                                                   |
| [Group](/helix/theme-blocks/layout/group.md)                               | A container that arranges several blocks in a row or column.                                                                                                    |
| [Divider](/helix/theme-blocks/layout/divider.md)                           | A horizontal line between content blocks.                                                                                                                       |
| [Popup](/helix/theme-blocks/links/popup.md)                                | A button that opens an overlay, such as a video or extra detail.                                                                                                |
| [Spacer](/helix/theme-blocks/layout/spacer.md)                             | Empty block for adjusting vertical spacing. See [How to set up custom spacing](/helix/how-to-guides/how-to-set-up-custom-spacing.md) for per-breakpoint values. |
| [Product card: Compact](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card, for shoppable slides.                                                                                                                   |
| [Colors](/helix/theme-blocks/basic/colors.md)                              | A row of color swatches built from nested Item blocks.                                                                                                          |