# 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.