The Core Component Carousel Component allows the content author to present content in a navigable carousel.
Using the Carousel Component, the content author to organize content in a rotating carousel of slides.
The edit dialog allows the content author to create, name, and order multiple slides as well as enable auto-transition with delay. Using the design dialog, the template author can define which components can be added to the carousel, enable or disable automatic transitions, and customize the styles.
The current version of the Carousel Component is v1, which was introduced with release 2.2.0 of the Core Components in October 2018, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
|Component Version||AEM 6.4||AEM 6.5||AEM as a Cloud Service|
release 2.17.4 and prior
For more information about Core Component versions and releases, see the document Core Components Versions.
To experience the Carousel Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.
The latest technical documentation about the Carousel Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
The Carousel, Tabs, and Accordion Components support linking directly to a panel within the component.
To do this:
Navigating to the URL with the panel ID as anchor, the browser will scroll directly to the particular component and display the specified panel. If the panel is configured not to be displayed by default, it will be scrolled to automatically.
The edit dialog allows the content author to add, rename, and rearrange slides as well as define the auto-transition settings.
Use the Add button to open the component selector to choose which component to add as a tab. Once added, an entry is added to the list, which contains the following columns:
If the viewport of the page is reduced so that the edit dialog becomes full screen, the Add button will be hidden. Components can still be added to the Carousel Component by dragging from the components browser and dropping on the Carousel Component in the page editor.
On the Properties tab, the content author can set the slides to automatically transition.
The slide advance controls are not enabled when in Edit mode. Use Preview mode or the View as Published option to interact with the carousel as a reader of the published content would.
The auto-advance feature is not enabled when in Edit mode. Use View as Published option to see the auto-advance feature as a reader of the published content would.
On the Accessibility tab, values can be set for ARIA accessibility labels for the component.
The content author can use the Select Panel option on the component toolbar to change to a different slide for editing as well as to easily rearrange the order of the slides.
Once selecting the Select Panel option in the component toolbar, the configured slides are displayed as a drop-down.
The design dialog allows the template author to define which components can be added as slides to the carousel component as well as define auto-transition defaults and which custom styles are available to the content author.
The Properties tab is used to define the default settings for the slide transitions when a content author adds the carousel component to a page.
The Allowed Components tab is used to define which components can be added as slides to the Carousel Component by the content author.
The Allowed Components tab functions in the same way as the tab of the same name when defining the policy and properties of a Layout Container in the Template Editor.
The Carousel Component supports the AEM Style System.
The Carousel Component supports the Adobe Client Data Layer.