# Carousel

## Overview

The Carousel component allows you to display a collection of items—images, text, and actions—in an interactive, rotating slideshow.

It is designed to optimize screen real estate by cycling through content within a fixed area, making it ideal for highlighting features, browsing visual galleries, or guiding users through a sequence of information without cluttering the page.

***

## Common Use Cases

| Use Case             | Description                                                     | Example                                                                    |
| -------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **Product Showcase** | specific featured items or new arrivals in a horizontal scroll. | A "New Arrivals" section on a Home Page showing product images and prices. |
| **Image Gallery**    | A visual portfolio or event recap.                              | Displaying photos from a recent site visit or marketing event.             |
| **Testimonials**     | Cycle through social proof without taking up vertical space.    | A single-item slider showing quotes and client names.                      |
| **Onboarding/Steps** | Guide users through a linear process.                           | A "How it Works" carousel with 3 slides: Step 1, Step 2, and Step 3.       |

***

## **Configuration**

### Data Source & Mapping

First, determine how the carousel receives data. You can manually add items or bind the component to a collection.

* **Data Source**: Select Manual for static content (like a fixed banner) or Variable/Query to dynamically load Salesforce records (like "Related Products").
* **Data Mappings**: If using dynamic data, you must map your data fields to the Carousel's display attributes:

<table><thead><tr><th width="157.91796875">Carousel Attribute</th><th>Description</th><th>Example Mapping</th></tr></thead><tbody><tr><td><strong>Title</strong></td><td>The main header text for the item.</td><td>{Product_Name__c}</td></tr><tr><td><strong>Description</strong></td><td>Subtext or details below the title.</td><td>{Short_Description__c}</td></tr><tr><td><strong>Image</strong></td><td>The background or hero image for the item.</td><td>{Image_URL__c}</td></tr><tr><td><strong>Actions</strong></td><td>Buttons or links associated with the item.</td><td>Navigate to <code>{RecordId}</code></td></tr></tbody></table>

### **Layout & Responsiveness**

Control the density of information displayed. You can define specific "Items Per Panel" settings for different device widths to ensure the carousel looks good on phones, tablets, and desktops.

* **Items Per Panel**: The number of cards visible at once (e.g., set to 1 for a "Hero Banner" feel, or 4 for a "Product Shelf" feel).
* **Gap**: Adjust the spacing between items.

### **Interaction & Visuals**

Fine-tune how users navigate through the content.

* **Navigation**: Toggle the visibility of the "Previous" and "Next" arrows.
* **Indicators**: Customize the dots or progress bars that show the current slide position.
* **Autoplay**: (Optional) Set the carousel to advance automatically after a set duration.
* **Item Clickable**: Enable the entire card to act as a trigger (e.g., clicking anywhere on the image navigates to a detail page).

***

## **Why Use the Carousel Component?**

* **Showcase Multiple Items:** Display a collection of items in a limited space.
* **Enhance Visual Appeal:** Create an engaging and interactive user experience.
* **Highlight Featured Content:** Draw attention to important items or promotions.
* **Improve Navigation:** Guide users through a series of related items or steps.


---

# 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/dynamic-components/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.