> 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/global-sections/products/showcase-carousel.md).

# Showcase carousel

A centered carousel. One slide sits in focus while the next and previous slides peek in from the sides, and you move between them by clicking the side panels.

![Showcase Carousel overview](/files/9yely5cnIZjmx1Uh3IzR)

{% hint style="info" %}
Works best with a handful of items that share a consistent photography style and aspect ratio.
{% endhint %}

***

## Settings

### Layout

| Setting               | Description                                                                                                                                                                                                                                                                              |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width                 | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. |
| Enable boxed layout   | Wraps the content in a contained box with its own color scheme. Not available with Full (no padding).                                                                                                                                                                                    |
| Media width (desktop) | How much of the width the active slide takes up. Available with Full (no padding).                                                                                                                                                                                                       |

### Gap

| Setting       | Description                                                   |
| ------------- | ------------------------------------------------------------- |
| Gap — Desktop | Space between the section header and the carousel on desktop. |
| Gap — Mobile  | Space between them on mobile.                                 |

### Background

| Setting         | Description                                    |
| --------------- | ---------------------------------------------- |
| Media           | Show an image or video behind the section.     |
| Image           | Background image.                              |
| Image — Mobile  | Separate background image for mobile.          |
| Video           | Shopify-hosted background video. Plays muted.  |
| Show overlay    | Add a color layer over the background media.   |
| Overlay color   | Color and opacity of the overlay.              |
| Parallax effect | Scroll effect applied to the background media. |

### Appearance

| Setting            | Description                                                                 |
| ------------------ | --------------------------------------------------------------------------- |
| Color scheme       | Color scheme for the section.                                               |
| Boxed color scheme | Color scheme for the content box. Available when Enable boxed layout is on. |

### Boxed padding

Available when Enable boxed layout is on and the width is not Full (no padding).

| Setting                 | Description                                                 |
| ----------------------- | ----------------------------------------------------------- |
| Top and bottom          | Inner top and bottom spacing of the content box on desktop. |
| Top and bottom (mobile) | Inner top and bottom spacing of the content box on mobile.  |

### Section padding

| Setting                 | Description                                     |
| ----------------------- | ----------------------------------------------- |
| Padding top / bottom    | Space above and below the section.              |
| Custom padding — Mobile | Set separate top and bottom padding for mobile. |

***

## Available Blocks

### Section Header

The heading and subheading above the carousel. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).

### Showcase item

One slide. Add one Showcase item per slide.

| Setting                          | Description                                                                                                                                                                                                                                                                                     |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image                            | The slide image.                                                                                                                                                                                                                                                                                |
| Background                       | The backdrop behind the image, shown only while the slide is centered. **None** — the image shows on its own. **Shape** — a colored shape sits behind it, with its own **Background color** and **Border color**. **Image** — an image sits behind the slide, uploaded in **Background image**. |
| Background color / Border color  | Colors of the shape backdrop, when Background is Shape.                                                                                                                                                                                                                                         |
| Background image                 | The backdrop image, when Background is Image.                                                                                                                                                                                                                                                   |
| Image spacing — Desktop / Mobile | Space around the slide image.                                                                                                                                                                                                                                                                   |
| Content gap — Desktop / Mobile   | Spacing between the content blocks.                                                                                                                                                                                                                                                             |
| Type                             | **Inherit** the section's color scheme, or apply a separate **Color scheme**.                                                                                                                                                                                                                   |

Each Showcase item holds these blocks:

| Block                                                 | Description                                |
| ----------------------------------------------------- | ------------------------------------------ |
| [Heading](/helix/theme-blocks/basic/heading.md)       | A heading line.                            |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | A smaller line above or below the heading. |
| [Text](/helix/theme-blocks/basic/text.md)             | A rich-text area.                          |
| [Button](/helix/theme-blocks/basic/button.md)         | A single call-to-action button.            |
| [Buttons](/helix/theme-blocks/basic/buttons.md)       | A group of call-to-action buttons.         |
| [Icon](/helix/theme-blocks/basic/icon.md)             | A standalone icon.                         |
| [Divider](/helix/theme-blocks/layout/divider.md)      | A horizontal line.                         |
| [Spacer](/helix/theme-blocks/layout/spacer.md)        | Adjustable empty space.                    |
| [Colors](/helix/theme-blocks/basic/colors.md)         | Color swatches.                            |