Carousel
The Avonni Carousel provides a customizable slideshow experience with navigation controls, autoplay options, and styling for various use cases.
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
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.
Link carousel to a collection variable from your flow (e.g., from a Get Records element).
When carousel content needs to reflect Salesforce records.
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.
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 Refresh prevents looping after the last item is reached, even when auto-scroll is on.
Disable Auto Scroll stops the carousel from advancing automatically — users must click the indicators or arrows.
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.
Image
Crop Fit controls how images fill their container: Cover, Contain, Fill, or None.
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
Indicator
Hide Indicator removes the progress dots below the carousel.
Indicator Variant changes the dot appearance: Base (filled) or Shaded (outlined). Requires Hide Indicator to be disabled.
Maximum Number of Indicator Items caps how many indicator dots are visible at once (defaults to 5 when there are more than 25 items). Requires Hide Indicator to be disabled.
Actions
Add action buttons overlaid on each carousel item. Configure each action's label, name, icon, title, and alternative text.
Position sets where the overlay buttons appear: Bottom Center, Bottom Left, Bottom Right, Top Left, or Top Right.
Variant controls the button style: Bare, Border, Menu, or Stretch.
Assistive Text
Assistive Text provides accessible descriptions of the carousel's navigation controls for screen readers (Autoplay Button, Next Panel, Previous Panel labels).
No Results Message
Set in Data Mappings, at the bottom of the Properties tab.
No Results Message replaces the default text shown when the carousel has no items to display.
Hide No Results Image and Hide No Results Message suppress the empty-state image and the text.
Interactions
Interactions 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.
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.
Controls the inner spacing between the carousel and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
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.
Adjusts display when the carousel is opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
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.
Styles the item's title text.
Color: Set the title color.
Font Size / Font Style / Font Weight: Control the title typography.
Styles the item's image.
Color Background: Set the image background color.
Height: Set the image height.
Radius: Round the corners of the image.
Styles the item's description text.
Color: Set the description color.
Font Size / Font Style / Font Weight: Control the description typography.
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.
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.
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).
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.
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.
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
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 or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?