# Carousel

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

## Configuring the Carousel

Configuring the [Data Source](/flow/component-builder/data-sources/understanding-data-sources.md) is key to effectively utilizing the Avonni Carousel Component. The Data Source is where you define the content of your carousel. It includes three main types of data sources: Manual, Variable, and Query.

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

<table><thead><tr><th>Data Source Type</th><th width="248.33333333333331">Description</th><th>When to Use</th></tr></thead><tbody><tr><td><a href="/pages/N1uTGxMW16RfbM4g39MR"><strong>Manual</strong></a></td><td>Involves manually entering data for carousel items. Useful for static content or predefined items.</td><td>Ideal for content that doesn't change frequently or for quick setup with specific items.</td></tr><tr><td><a href="/pages/ziXlgb71wxsEEwGKKCqQ"><strong>Variable</strong></a></td><td>Links carousel to variable collections in Salesforce. Items change dynamically with the data.</td><td>Suitable when carousel content needs to reflect changing data from Salesforce records.</td></tr><tr><td><a href="/pages/viMlx8xVDeuY59H0WnZo"><strong>Query</strong></a></td><td>Enables fetching data through a query, pulling various records/data points from Salesforce.</td><td>Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection is not necessary with this method, as the query itself is powerful enough to simplify your flow.</td></tr></tbody></table>

### **Data Mappings for Carousel Content**

In addition to selecting the data source, setting up Data Mappings is vital. Data Mappings allow you to link specific fields in your data source to the carousel's properties, ensuring that the correct data from Salesforce is displayed correctly in the carousel.

#### **How Data Mappings Work**:

* Link specific fields from your data source (like image URLs or text descriptions) to the corresponding carousel attributes.
* Customize which data points control aspects like image display, captions, etc.

This feature is handy when using Variable or Query Data Sources, as it allows the carousel to dynamically present the correct content based on the data it receives.

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

## Changing the Properties

### **Changing the number of items per panel**

You can select the number of images that need to be displayed by panel. The item numbers may vary based on the screen size. The component allows you to set the number of images displayed for small, medium, or large devices.&#x20;

**`Small`** is 480px and more, **`Medium`** is 768px and more, and **`Large`** is 1024px and more. **`Items per panel`** allows you to define a default value of items for your carousel.&#x20;

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

### **Changing Carousel Behavior**

* **Disable Auto-Scrolling:** Enable 'disable-auto-scroll' toggle to stop the automatic scrolling of images. Users must use indicator buttons to view images.
* **Remove Control Button:** Activate the same toggle ('disable-auto-scroll') to remove the control button.
* **Disable Continuous Looping:** Enable 'disable-auto-refresh' toggle. Images will scroll once and stop at the last image. This works even if 'disable-auto-scroll' is not enabled.
* **Set Image Display Duration:** Adjust the 'scroll-duration' attribute in advanced options to change how long each image is displayed.

## Adding Interactions

### **Before Interaction Setup**

First, add action elements to carousel items using the 'Actions' section in the component builder. Create action buttons here.

<figure><img src="/files/5Uj2Hc2WwlsMRP6oUpbo" alt=""><figcaption><p>How to create Action Buttons</p></figcaption></figure>

### Create the interaction

[Interactions](/flow/component-builder/interactions-panel.md) define what will happen when users click on an image.

* On **`Item Click`**: The event is fired when a user clicks on an item in the Carousel.
* On **`Action Click`**: The event is fired when a user clicks on an action.

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

{% hint style="info" %}

### Related articles

* [How to create a record detail page navigation](/flow/component-builder/interactions-panel/navigate.md#how-to-create-a-navigation-to-a-record-detail-page)
* [How to create an object page navigation](/flow/component-builder/interactions-panel/navigate.md#how-to-create-a-navigation-to-an-object-page)
  {% endhint %}

***

## Output Variables

The Carousel exposes several 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.

### Current Item

As the carousel navigates between panels (auto-scroll or manual navigation), these variables track which item is currently visible.

| Output variable       | Type             | What it returns                                                                                                            |
| --------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Current Item**      | Record (SObject) | The full Salesforce record of the item currently displayed in the carousel. Updates automatically as the carousel scrolls. |
| **Current Item Name** | Text (String)    | The name of the currently displayed item.                                                                                  |

> **Example:** A product showcase carousel auto-scrolls through featured products. Use **Current Item** to dynamically update a detail panel next to the carousel showing the current product's description and price.

### Item Clicks

When users click on a carousel item (requires **Items Clickable** to be enabled), these variables tell you which item was clicked.

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

> **Example:** A user clicks on a product image in the carousel. Use **Clicked Item** to navigate to a product detail screen.

### Action Clicks

When users click an action button on a carousel item, these variables identify which action was triggered and on which item.

| Output variable                   | Type             | What it returns                                                                                                                                                   |
| --------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Clicked Item Action Item**      | Record (SObject) | The full Salesforce record of the item where the user clicked an action.                                                                                          |
| **Clicked Item Action Name**      | Text (String)    | The name of the action the user clicked (e.g., "Add to Cart", "View Details"). Use in a **Decision** element to route the flow based on which action was pressed. |
| **Clicked Item Action Item Name** | Text (String)    | The name of the item where the action was clicked.                                                                                                                |

> **Example:** A carousel displays promotional banners with a "Learn More" action. Use a **Decision** element to check **Clicked Item Action Name** and navigate to the appropriate promotional page.

### Component Metadata

| Output variable     | Type    | What it returns                                                                                                                           |
| ------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently loaded in the carousel. Useful for displaying a count or making decisions when the carousel is empty. |

***

## Styling the Carousel

From the Styles panel, you can customize styling for the carousel: **`Margin`**, **`Size`**, **`Item`**, **`Item`** **`Title`** , **`Item Description`** and **`Indicator`**. &#x20;

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

## Examples

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

## Specifications

{% tabs %}
{% tab title="Attributes" %}

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>assistiveText</td><td>String</td><td>Description of the carousel items for screen-readers.</td></tr><tr><td>currentPanel</td><td>Integer</td><td>Dictates the currently active/visible carousel panel.</td></tr><tr><td>disableAutoRefresh</td><td>Boolean</td><td>If present, the carousel doesn't loop after the last image is displayed.</td></tr><tr><td>disableAutoScroll</td><td>Boolean</td><td>If present, images do not automatically scroll and users must click the indicators to scroll.</td></tr><tr><td>hideIndicator</td><td>Boolean</td><td>If present, the progress indicator is hidden.</td></tr><tr><td>hidePreviousNextPanelNavigation</td><td>Boolean</td><td>If present, the left and right arrows of the carousel are hidden.</td></tr><tr><td>indicatorVariant</td><td>String</td><td>Changes the appearance of the progress indicators. Valid values are base or shaded</td></tr><tr><td>isInfinite</td><td>Boolean</td><td>If present, the carousel will loop when reaching the last panel.</td></tr><tr><td>itemsPerPanel</td><td>Integer</td><td>Number of items to be displayed at a time in the carousel. Maximum of 10 items per panel.</td></tr><tr><td>smallItemsPerPanel</td><td>Integer</td><td>Number of items to be displayed for devices of 480px and more </td></tr><tr><td>mediumItemsPerPanel</td><td>Integer</td><td>Number of items to be displayed for devices of 768px and more </td></tr><tr><td>largeItemsPerPanel</td><td>Integer</td><td>Number of items to be displayed for devices of 1024px and more </td></tr><tr><td>scrollDuration</td><td>Integer</td><td>Auto scroll delay. The default is 5 seconds, after which the next image is displayed</td></tr><tr><td>items</td><td>CarouselItem[]</td><td>Images to display in the carousel</td></tr></tbody></table>
{% endtab %}

{% tab title="Events" %}

| Name            | Description           |
| --------------- | --------------------- |
| **`itemClick`** | The item data clicked |
| {% endtab %}    |                       |

{% tab title="Style" %}

| Name                                                   | Description                                                                         |
| ------------------------------------------------------ | ----------------------------------------------------------------------------------- |
| **`Item Background Color`**                            | Define a background color on items element                                          |
| **`Item Title Color`**                                 | Define a title color on items element                                               |
| **`Item Title Font Size`**                             | Define a specific font size on items element                                        |
| **`Item Title Font Style`**                            | Define a font style on items element                                                |
| **`Item Title Font Weight`**                           | Define a font weight on items element                                               |
| **`Item Description Color`**                           | Define a item description color when a description is present                       |
| **`Item Description Font Size`**                       | Define a item description font size when a description is present                   |
| **`Item Description Font Style`**                      | Define a item description font style when a description is present                  |
| **`Item Description Font Weight`**                     | Define a item description font weight when a description is present                 |
| **`Active Indicator Background Color`**                | Define an active indicator background color on the indicator element                |
| **`Active Indicator Background Color Hover`**          | Define an active indicator background color hover on the indicator element          |
| **`Active Indicator Border Color`**                    | Define an active indicator border color on the indicator element                    |
| **`Active Indicator Border Color Hover`**              | Define an active indicator border color hover on the indicator element              |
| **`Active Indicator Shaded Background Color`**         | Define an active indicator shaded background color on the indicator element         |
| **`Active Indicator Shaded Background Color Hover`**   | Define an active indicator shaded background color hover  on the indicator element  |
| **`Active Indicator Shaded Border Color`**             | Define an active indicator shaded border color on the indicator element             |
| **`Active Indicator Shaded Border Color Hover`**       | Define an active indicator shaded border color hover on the indicator element       |
| **`Inactive Indicator Background Color`**              | Define an inactive indicator background color on the indicator element              |
| **`Inactive Indicator Background Color Hover`**        | Define an inactive indicator background color hover on the indicator element        |
| **`Inactive Indicator Border Color`**                  | Define an inactive indicator border color on the indicator element                  |
| **`Inactive Indicator Border Color Hover`**            | Define an inactive indicator border color hover on the indicator element            |
| **`Inactive Indicator Shaded Background Color`**       | Define an inactive indicator shaded background color on the indicator element       |
| **`Inactive Indicator Shaded Background Color Hover`** | Define an inactive indicator shaded background color hover on the indicator element |
| **`Inactive Indicator Shaded Border Color`**           | Define an inactive indicator shaded border color hover on the indicator element     |
| **`Inactive Indicator Shaded Border Color Hover`**     | Define an inactive indicator shaded border color hover on the indicator element     |
| {% endtab %}                                           |                                                                                     |
| {% endtabs %}                                          |                                                                                     |


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.