Custom Carousel Component - AEM Analytics Layer Data Capturing | Community
Skip to main content
Rohan_Garg
New Participant
October 11, 2022
Solved

Custom Carousel Component - AEM Analytics Layer Data Capturing

  • October 11, 2022
  • 1 reply
  • 664 views

Hi Team,

 

I have a custom Carousel Component inheriting from Core Carousel.

The carousel has slick slider implemented in it. The markup is minimally changed other than addition of a <div> container which has slick slider dependency.

<div
class="${wcmmode.edit ? 'carousel__authoring' : ''} carousel__item-wrapper ${carousel.navigationIcon} ${carousel.navigatorsOverlapping} ${carousel.autoplay}"
data-slick='{"autoplay": ${carousel.autoplay}, "pauseOnHover": ${carousel.autopauseDisabled}}'
data-visible-items="${carousel.slideCount}"
data-prev-icon="icon-left-arrow-black"
data-next-icon="icon-right-arrow-black">

 

In HTML when I use the data-cmp-data-layer attribute for carousel and its items, the json is correctly generated -

 

However, when seen in the adobe.getState() The carousel items are shown as image nodes with parentId pointing to carousel.

 

Can you please help as to why the data-layer changes from carousel-item to image nodes with parentId pointing to carousel ?

@arunpatidar , @ritesh_mittal , @b_sravan , @mohit_kbansal , @gaurav-behl 

 

Thanks,

Rohan Garg

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Rohan_Garg

The issue was due to the carousel component being overlayed to accommodate slick slider functionality.

Reverting the carousel to core component resolved the issue.

We will try to accommodate slick slider in core carousel with full authoring capability.

1 reply

Rohan_Garg
Rohan_GargAuthorAccepted solution
New Participant
March 23, 2023

The issue was due to the carousel component being overlayed to accommodate slick slider functionality.

Reverting the carousel to core component resolved the issue.

We will try to accommodate slick slider in core carousel with full authoring capability.