Hey,

We're trying to extend/overlay the Core Carousel in AEM 6.4.

We created a new cq:Component called carousel.

This is our .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="true"
    jcr:primaryType="cq:Component"
    jcr:title="Carousel"
    sling:resourceSuperType="core/wcm/components/carousel/v1/carousel"
    componentGroup="CorporateHomepage.Content"/>

This is our _cq_editConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterchilddelete="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_DELETE"
        afterchildinsert="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_INSERT"
        afterchildmove="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_MOVE"/>
</jcr:root>

At this point, the carousel is working correctly after we've allowed it in in the layout container at the template level.

However, the issue is when we try to extend the Core Carousel. I tried to import the carousel.html from aem-core-wcm-components/carousel.html at master · adobe/aem-core-wcm-components · GitHub in order to extend the HTML, but when we do this we get an error and the carousel stops working.

<div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     class="cmp-carousel"
     data-cmp-is="carousel"
     data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"
     data-cmp-delay="${carousel.delay}"
     data-cmp-autopause-disabled="${carousel.autopauseDisabled}">
    <div class="cmp-carousel__content" data-sly-test="${carousel.items && carousel.items.size > 0}" >
        <div data-sly-repeat.item="${carousel.items}"
             data-sly-resource="${item.name @ decorationTagName='div'}"
             role="tabpanel"
             class="cmp-carousel__item${itemList.first ? ' cmp-carousel__item--active' : ''}"
             data-cmp-hook-carousel="item"></div>
        <div class="cmp-carousel__actions">
            <button role="button"
                    class="cmp-carousel__action cmp-carousel__action--previous"
                    data-cmp-hook-carousel="previous" aria-label="${'Previous' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Previous' @ i18n}</span>
            </button>
            <button role="button"
                    class="cmp-carousel__action cmp-carousel__action--next"
                    data-cmp-hook-carousel="next" aria-label="${'Next' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Next' @ i18n}</span>
            </button>
            <button data-sly-test="${carousel.autoplay}"
                    role="button"
                    class="cmp-carousel__action cmp-carousel__action--pause"
                    data-cmp-hook-carousel="pause" aria-label="${'Pause' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Pause' @ i18n}</span>
            </button>
            <button data-sly-test="${carousel.autoplay}"
                    role="button"
                    class="cmp-carousel__action cmp-carousel__action--play cmp-carousel__action--disabled"
                    data-cmp-hook-carousel="play" aria-label="${'Play' @ i18n}">
                <span class="cmp-carousel__action-icon"></span>
                <span class="cmp-carousel__action-text">${'Play' @ i18n}</span>
            </button>
        </div>
        <ol role="tablist" class="cmp-carousel__indicators" data-cmp-hook-carousel="indicators">
            <li data-sly-repeat.item="${carousel.items}"
                role="tab"
                class="cmp-carousel__indicator${itemList.first ? ' cmp-carousel__indicator--active' : ''}"
                data-cmp-hook-carousel="indicator">${item.title}</li>
        </ol>
    </div>
    <sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
         data-sly-test="${(wcmmode.edit || wcmmode.preview) && carousel.items.size < 1}"></sly>
</div>

This is the carousel.html in the carousel component in order to extend the carousel.

At this point the error in Preview Mode is show below

org.apache.sling.api.SlingException: Cannot get DefaultSlingScript: org.apache.sling.api.request.RecursionTooDeepException: /content/corp-home/home/jcr:content/root/responsivegrid/carousel

Cannot serve request to /content/corp-home/home.html on this server

and in Edit (Authoring) Mode the Carousel Dialog isn't able to add new components.

It seems like the problem occurs around data-sly-use.carousel since the component isn't able to read any carousel.items after data-sly-repeat.item. However it is able to read an item size for carousel.items.size.

    <div class="cmp-carousel__content" data-sly-test="${carousel.items && carousel.items.size > 0}" >

        <div data-sly-repeat.item="${carousel.items}"

             data-sly-resource="${item.name @ decorationTagName='div'}"

How can we extend our proxy carousel? We are able to properly extend any other component, i.e. teaser, text, title, but are facing issues with this Core Carousel in 6.4.

Thanks