Carousel
A slideshow for cycling through a series of content.
The Avonni Carousel Component is a slideshow tool that shows items like images one by one. It's good for showing multiple things in a limited space. You can use buttons or dots to move through the items. The slideshow can auto-play, pause, or resume. You can customize its appearance for different effects, like rotating banners or featured sections.
You can select the number of images that need to be displayed by panel. Items number 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. It's possible to change the behavior of the carousel by enabling or disabling some settings. Disable auto-scrolling and remove the control button by enabling the toggle
disable-auto-scroll. The user must then use the indicator buttons to display each image.Disable continuous looping by enabling the toggle
disable-auto-refresh. The images scroll one time through and stop at the last image if you include disable-auto-refresh but not disable-auto-scroll.Change the number of seconds each image displays using the
scroll-duration attribute located in the advanced options.
- On
Item Click: The event is fired when a user clicks on an item. - On
Action Click: The event is fired when a user clicks on an action.
From the Styles panel, you can customize styling for the carousel:
Margin, Size, Item, Item Title , Item Description and Indicator. 
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 |
Name | Description |
|---|---|
itemClick | The item data clicked |
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 |
Last modified 26d ago