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:

Carousel Attribute	Description	Example Mapping
Title	The main header text for the item.	{Product_Name__c}
Description	Subtext or details below the title.	{Short_Description__c}
Image	The background or hero image for the item.	{Image_URL__c}
Actions	Buttons or links associated with the item.	Navigate to {RecordId}

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.