> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/carousel.md).

# Carousel

<figure><img src="/files/CiCcdBTFooQJbSbYPsIF" alt="" width="375"><figcaption></figcaption></figure>

The Avonni Carousel displays items (images, records, or custom content) in horizontal sliding panels. It supports multiple items per panel, responsive breakpoints, auto-scroll timing, infinite looping, navigation arrows, progress indicators, clickable items, and optional action buttons overlaid on each panel.

## Overview

{% @arcade/embed url="<https://app.arcade.software/share/e2JZMlZzFKutN2lrb3zJ>" flowId="e2JZMlZzFKutN2lrb3zJ" %}

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Carousel Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

The **Data Source** determines where the carousel's items come from.

| Data Source                                                      | Description                                                                               | When to Use                                                |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Enter items directly within the component.                                                | Static content or quick setup with specific items.         |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Link carousel to a collection variable from your flow (e.g., from a Get Records element). | When carousel content needs to reflect Salesforce records. |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Fetch data with a query — no separate Get Records element needed.                         | Complex data retrieval or real-time records.               |

### Data Mapping

When using Variable or Query, configure **Data Mappings** to tell the carousel which fields drive the image, title, and description for each item.

<figure><img src="/files/q60vmMSg8asM4nAkRumz" alt=""><figcaption></figcaption></figure>

### Properties

**Hide Navigation** hides the previous/next arrow buttons.

**Is Infinite** makes the carousel loop back to the first item after the last one.

**Disable Auto Scroll** stops the carousel from advancing automatically — users must click the indicators or arrows.

**Disable Auto Refresh** prevents looping after the last item is reached, even when auto-scroll is on.

**Current Item** sets which item is shown on initial load (by item name).

**Scroll Duration** controls the auto-scroll interval in seconds before advancing to the next panel (default: 5 seconds).

**Items Clickable** makes entire carousel items clickable, not just the action buttons.

### Actions

Add action buttons overlaid on each carousel item. Configure each action's label, name, icon, position, and style.

**Actions Position** sets where the overlay buttons appear: Bottom Center, Bottom Left, Bottom Right, Top Left, or Top Right.

**Actions Variant** controls the button style: Bare, Border, Menu, or Stretch.

### Indicator

**Hide Indicator** removes the progress dots below the carousel.

**Indicator Variant** changes the dot appearance: **Base** (filled) or **Shaded** (outlined).

**Maximum Number of Indicator Items** caps how many indicator dots are visible at once (useful when there are many items).

### Layout

**Items per panel** sets the default number of items shown simultaneously (max 10).

Set different counts per breakpoint for responsive behavior:

* **Small Items per panel** — applies at 480 px and wider
* **Medium Items per panel** — applies at 768 px and wider
* **Large Items per panel** — applies at 1024 px and wider

### Image

**Crop Fit** controls how images fill their container: Cover, Contain, Fill, or None.

### Advanced Options

**Assistive Text** provides accessible descriptions of the carousel's navigation controls for screen readers (Autoplay Button, Next Panel, Previous Panel labels).

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Carousel. Configure them from the **Interactions** tab of the Edit Carousel panel.

### Action Click

Fires when a user clicks an action button overlaid on a carousel item. The `targetName` output variable holds the name of the action that was clicked, letting you branch logic based on which action was selected.

### Current Item Change

Fires when the visible item changes, whether by auto-scroll or manual navigation (arrows or indicators). Does not fire on initial load — only when the item changes after the carousel has rendered.

### Item Click

Fires when a user clicks a carousel item. Requires **Items Clickable** to be enabled.

***

## Styling

The **Style** tab gives you control over the carousel's spacing, items, indicators, and navigation and action buttons. Configure it from the **Style** tab of the carousel's property editor.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the carousel, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the carousel.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the carousel and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the carousel's dimensions.

* **Width / Height:** Set fixed dimensions for the carousel.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the carousel.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Item" %}
Styles each carousel item card.

* **Background Color:** Set the item's background color.
* **Border Color / Border Size / Border Style / Border Radius:** Customize the item border.
* **Content Border Radius:** Round the corners of the item content.
  {% endtab %}

{% tab title="Item Title" %}
Styles the item's title text.

* **Color:** Set the title color.
* **Font Size / Font Style / Font Weight:** Control the title typography.
  {% endtab %}

{% tab title="Image" %}
Styles the item's image.

* **Color Background:** Set the image background color.
* **Height:** Set the image height.
* **Radius:** Round the corners of the image.
  {% endtab %}

{% tab title="Item Description" %}
Styles the item's description text.

* **Color:** Set the description color.
* **Font Size / Font Style / Font Weight:** Control the description typography.
  {% endtab %}

{% tab title="Active Indicator" %}
Styles the indicator for the active slide.

* **Background Color / Background Color Hover:** Set the indicator background in each state.
* **Border Color / Border Color Hover:** Set the indicator border in each state.
* **Shaded Background Color / Shaded Background Color Hover / Shaded Border Color / Shaded Border Color Hover:** Set the shaded-variant colors.
  {% endtab %}

{% tab title="Inactive Indicator" %}
Styles the indicators for inactive slides.

* **Background Color / Background Color Hover:** Set the indicator background in each state.
* **Border Color / Border Color Hover:** Set the indicator border in each state.
* **Shaded Background Color / Shaded Background Color Hover / Shaded Border Color / Shaded Border Color Hover:** Set the shaded-variant colors.
  {% endtab %}

{% tab title="Navigation Button" %}
Styles the previous/next navigation buttons.

* **Background Color / Background Color Hover / Background Color Disabled:** Set the button background in each state.
* **Icon Color / Icon Color Hover / Icon Color Disabled:** Set the icon color in each state.
* **Border Color / Border Color Hover / Border Color Disabled:** Set the border color in each state.
* **Border Size / Border Size Hover / Border Style / Border Style Hover:** Customize the border thickness and style.
  {% endtab %}

{% tab title="Action Button Bare" %}
Styles bare-variant action buttons on items.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background in each state.
* **Text Color / Text Color Active / Text Color Hover:** Set the label color in each state.
* **Border Color / Border Color Active / Border Color Hover:** Set the border color in each state.
* **Border Size / Border Style / Border Radius:** Customize the border.
  {% endtab %}

{% tab title="Action Button Border & Stretch" %}
Styles border and stretch (neutral) action buttons on items.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background in each state.
* **Text Color / Text Color Active / Text Color Hover:** Set the label color in each state.
* **Border Color / Border Color Active / Border Color Hover:** Set the border color in each state.
* **Border Size / Border Style / Border Radius:** Customize the border.
  {% endtab %}

{% tab title="Action Button Menu" %}
Styles the action button menu on items.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background in each state.
* **Text Color / Text Color Active / Text Color Hover:** Set the label color in each state.
* **Border Color / Border Color Active / Border Color Hover:** Set the border color in each state.
* **Border Size / Border Style / Border Radius:** Customize the border.
  {% endtab %}
  {% endtabs %}

***

## Output Variables

The Carousel exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Carousel component, and pick the output variable you need.

### Item Click

When a user clicks a carousel item (requires **Items Clickable**).

| Output variable       | Type             | What it returns                                       |
| --------------------- | ---------------- | ----------------------------------------------------- |
| **Clicked Item**      | Record (SObject) | The record behind the carousel item the user clicked. |
| **Clicked Item Name** | Text (String)    | The name (key) of the clicked carousel item.          |

### Action Click

When a user clicks an action button overlaid on a carousel item.

| Output variable                   | Type             | What it returns                                                |
| --------------------------------- | ---------------- | -------------------------------------------------------------- |
| **Clicked Item Action Item**      | Record (SObject) | The record behind the item on which the action was clicked.    |
| **Clicked Item Action Item Name** | Text (String)    | The name of the carousel item on which the action was clicked. |
| **Clicked Item Action Name**      | Text (String)    | The name of the action button the user clicked.                |

### Current Item

Updates whenever the visible slide changes — by auto-scroll, navigation arrows, or indicators.

| Output variable  | Type             | What it returns                                        |
| ---------------- | ---------------- | ------------------------------------------------------ |
| **Current Item** | Record (SObject) | The record behind the carousel item currently in view. |

> **Example:** Use **Current Item** to display record details in a separate component on the same screen that refreshes as the user browses through slides.

### Others

| Output variable     | Type    | What it returns                                             |
| ------------------- | ------- | ----------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently loaded in the carousel. |

### Flow Interaction Output Variables

Like all interactive Flow components, the Carousel exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/carousel.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.