Custom Carousel Component - AEM Analytics Layer Data Capturing

[Rohan_Garg]

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

[Rohan_Garg · Accepted solution]

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.