Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Carousel is not getting rendered in edit mode

Avatar

Level 5

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

14 Replies

Avatar

Level 3

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.

Avatar

Community Advisor

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

Avatar

Level 5

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

Avatar

Community Advisor

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.

Avatar

Level 5

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

Avatar

Level 10

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

AVCAR.png

Avatar

Level 10

Hi,

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

It works fine!!

~Ratna.

Avatar

Community Advisor

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

Avatar

Level 10

Excellent suggestion Veena!

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

Avatar

Level 5

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

Avatar

Level 7

@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..

Avatar

Level 5

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

Avatar

Level 7

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..