Carousel is not getting rendered in edit mode

[richac96395021]

Hi Team,

I am currently trying to build customized carousel in AEM 6.2, the carousel is getting properly rendered in Preview mode but the same is not getting rendered in edit mode. The carousel is appearing as a list in classic UI while it is unclickable in Touch UI mode.

Please let me know any solution on the same.

with regards,

Richa Chaubey

[OlivBur]

Do you use any custom JS? Have you checked the browser console for js errors? Maybe your JS clashes with some JS in the edit mode or with the additional rendered html for the edit bars, etc.

[VeenaVikraman]

Please inspect the browser console and check if you have any JS errors in Edit mode ?

[richac96395021]

Hi All,

I am using slick 1.8 plugin to get carousel, and there are no error on browser console. The carousel works in the preview mode but not in edit mode. Please let me know how can we resolve conflicts between the slick js and the existing aem js framework.

with regards,

Richa Chaubey

[VeenaVikraman]

Any JS error should display on your browser console. Please check if you have any error in browser console in Edit mode. If no error, put some console.log in the files which you believe is conflicting and confirm .

If you can provide us a sample component to reproduce the issue in our local we can check and let you know.

[richac96395021]

Hi Veena,

Adding to my previous reply The carousel is working in classic UI (edit mode) but not in Touch UI(edit mode).

with regards,

Richa Chaubey

[smacdonald2008]

Must be an issue with the lib you are using - we created a carousel using a JQUery plug-in and it works fine.

Adobe Experience Manager Help | Adding a Custom Carousel Component to the Experience Manager Toy Sit...

[smacdonald2008]

Just tested this article again and it renders in Edit mode in Touch UI:

[Ratna_Kumar]

Hi,

I too just tested the article which have the carousal package in it.

It works fine!!

~Ratna.

[VeenaVikraman]

Can you create a sample project using slick.js and your carousel and share it via google drive ? We can check this

[smacdonald2008]

Excellent suggestion Veena!

Issue must be the lib used here - as the JQuery Lib we used in this article works fine.

[richac96395021]

Hi All,

I have created a sample carousel project using slick js, following is the link for the same

Sample_Slick_Carousel-1.0.zip - Google Drive

Note:- I am currently working on AEM 6.2

with regards,

Richa Chaubey

[viveksachdeva]

@richac96395021Your package behaves the same as the one mentioned in the screenshot by smacdonald2008​.. The only difference is that the one you shared is not autoplayed.. You should change main.js to set autoplay parameter so it looks like:

$jq(".center").slick({

  centerMode: true,

        focusOnSelect: true,

        slidesToShow: 5,

        variableWidth: true,

        centerPadding: '60px',

         autoplay:true,

        responsive: [{

                breakpoint:768,

                settings: {

        centerMode: true,

        centerPadding: '40px',

        slidesToShow: 5

                }

            },

            {

                breakpoint:480,

                settings: {

                    centerMode: true,

        centerPadding: '40px',

                    slidesToShow: 1,

                }

            },

        ]

      });

P.S. : The buttons(prev/next) are not working in either of the packages in edit mode, probably because event is not bind to those buttons in edit mode..

[richac96395021]

Hi Vivek,

The buttons(prev/next) as well as any click on the next slide is working in Classic UI edit mode but not in Touch UI edit mode.

with regards,

Richa Chaubey

[viveksachdeva]

In Touch UI, there is an overlay wrapper layer added that is used for component editing.. Overlay has a z-index of 900 which is greater than z-index of content-frame(100).. So when you click on the arrows, you are actually clicking on the overlay wrapper and hence nothing happens.. I believe this is by design and making changes to it may have impact on edit behavior of components..