Carousel component written in HTL.
- Allows addition of Carousel item components of varying resource type.
- Allowed components can be configured through policy configuration.
- Carousel navigation via next/previous and position indicators.
- Carousel autoplay with:
- Configurable delay.
- Ability to disable automatic pause on hover.
- Pause/play buttons.
- Automatic pausing when the document is hidden, making use of the Page Visibility API.
- Editing features for items (adding, removing, editing, re-ordering).
- Allows deep linking into a specific panel by passing the panel id as the URL fragment
The Carousel component uses the com.adobe.cq.wcm.core.components.models.Carousel
Sling model as its Use-object.
The following configuration properties are used:
./autoplay
- defines whether or not the carousel should automatically transition between slides../delay
- defines the delay (in milliseconds) when automatically transitioning between slides../autopauseDisabled
- defines whether or not automatic pause when hovering the carousel is disabled../controlsPrepended
- defines whether the carousel controls should be arranged before the carousel items or not.
It is also possible to define the allowed components for the Carousel.
The following properties are written to JCR for this Carousel component and are expected to be available as Resource
properties:
./autoplay
- defines whether or not the carousel should automatically transition between slides../delay
- defines the delay (in milliseconds) when automatically transitioning between slides../autopauseDisabled
- defines whether or not automatic pause when hovering the carousel is disabled../id
- defines the component HTML ID attribute../accessibilityLabel
- defines an accessibility label for the carousel../activeItem
- defines the name of the item that is shown by default in the component.
The edit dialog also allows editing of Carousel items (adding, removing, naming, re-ordering).
Note: on author instances automatic transitioning only works with the wcmmode=disabled
URL parameter.
The component provides a core.wcm.components.carousel.v1
client library category that contains a recommended base
CSS styling and JavaScript component. It should be added to a relevant site client library using the embed
property.
BLOCK cmp-carousel
ELEMENT cmp-carousel__content
ELEMENT cmp-carousel__item
ELEMENT cmp-carousel__actions
ELEMENT cmp-carousel__action
MOD cmp-carousel__action--disabled
MOD cmp-carousel__action--previous
MOD cmp-carousel__action--next
MOD cmp-carousel__action--pause
MOD cmp-carousel__action--play
ELEMENT cmp-carousel__action-icon
ELEMENT cmp-carousel__action-text
ELEMENT cmp-carousel__indicators
ELEMENT cmp-carousel__indicator
Apply a data-cmp-is="carousel"
attribute to the wrapper block to enable initialization of the JavaScript component.
The following attributes can be added to the same element to provide options:
data-cmp-autoplay
- if the attribute is present, indicates that the carousel should automatically transition between slides.data-cmp-delay
- the delay (in milliseconds) when automatically transitioning between slides.data-cmp-autopause-disabled
- if the attribute is present, indicates that automatically pausing the carousel on hover, is disabled.
A hook attribute from the following should be added to the corresponding element so that the JavaScript is able to target it:
data-cmp-hook-carousel="item"
data-cmp-hook-carousel="previous"
data-cmp-hook-carousel="next"
data-cmp-hook-carousel="pause"
data-cmp-hook-carousel="play"
data-cmp-hook-carousel="indicators"
data-cmp-hook-carousel="indicator"
The following properties and child nodes are required in the proxy component to enable full editing functionality for the Carousel:
./cq:isContainer
- set to{Boolean}true
, marks the Carousel as a container component./cq:editConfig
-afterchilddelete
,afterchildinsert
andafterchildmove
listeners should be provided via the edit configuration of the proxy._cq_editConfig.xml
contains the recommended actions and can be copied to the proxy component.
The default Carousel site Client Library provides a handler for message requests between the editor and the Carousel. If the built-in Client Library is not used, a message request handler should be registered:
new Granite.author.MessageChannel("cqauthor", window).subscribeRequestMessage("cmp.panelcontainer", function(message) {
if (message.data && message.data.type === "cmp-carousel" && message.data.id === myCarouselHTMLElement.dataset["cmpPanelcontainerId"]) {
if (message.data.operation === "navigate") {
// handle navigation
}
}
});
The handler should subscribe to a cmp.panelcontainer
message that allows routing of a navigate
operation to ensure
that the UI component is updated when the active item is switched in the editor layer.
- Vendor: Adobe
- Version: v1
- Compatibility: AEM 6.3
- Status: production-ready
- Documentation: https://www.adobe.com/go/aem_cmp_carousel_v1
- Component Library: https://www.adobe.com/go/aem_cmp_library_carousel