Carousel

The Avonni Carousel provides a customizable slideshow experience with navigation controls, autoplay options, and styling for various use cases.

Configuring the Carousel

Configuring the Data Source 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.

Data Source Type	Description	When to Use
Manual	Involves manually entering data for carousel items. Useful for static content or predefined items.	Ideal for content that doesn't change frequently or for quick setup with specific items.
Variable	Links carousel to variable collections in Salesforce. Items change dynamically with the data.	Suitable when carousel content needs to reflect changing data from Salesforce records.
Query	Enables fetching data through a query, pulling various records/data points from Salesforce.	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.

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.

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.

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.

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.

How to create Action Buttons

Create the interaction

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

Related articles

• How to create a record detail page navigation
• How to create an object page navigation

Styling the Carousel

From the Styles panel, you can customize styling for the carousel: Margin, Size, Item, Item Title , Item Description and Indicator.

You can find the instructions for styling here.

Examples

Specifications

Attributes

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

Events

Name	Description
itemClick	The item data clicked

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