Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Carousel is not getting rendered in edit mode

richac96395021
Level 5
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

1 Reply
OlivBur
Level 3
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.

Veena_Vikram
Community Advisor
Community Advisor

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

richac96395021
Level 5
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

Veena_Vikram
Community Advisor
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.

richac96395021
Level 5
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

smacdonald2008
Level 10
Level 10

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

AVCAR.png

Ratna_Kumar
Community Advisor
Community Advisor

Hi,

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

It works fine!!

~Ratna.

Veena_Vikram
Community Advisor
Community Advisor

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

smacdonald2008
Level 10
Level 10

Excellent suggestion Veena!

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

richac96395021
Level 5
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

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

richac96395021
Level 5
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

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