Carousel is not getting rendered in edit mode | Community
Skip to main content
richac96395021
richac96395021
Level 4
September 4, 2017

Carousel is not getting rendered in edit mode

  • September 4, 2017
  • 4 replies
  • 5381 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    4 replies

    OlivBur
    OlivBur
    Level 2
    September 4, 2017

    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
      Community Advisor
      VeenaVikramanCommunity Advisor
      Community Advisor
      September 5, 2017

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

        richac96395021
        richac96395021Author
        Level 4
        September 15, 2017

        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
        Community Advisor
        VeenaVikramanCommunity Advisor
        Community Advisor
        September 15, 2017

        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
          richac96395021Author
          Level 4
          September 15, 2017

          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

          richac96395021
          richac96395021Author
          Level 4
          September 16, 2017

          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
          Community Advisor
          viveksachdevaCommunity Advisor
          Community Advisor
          September 18, 2017

          @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
          richac96395021Author
          Level 4
          September 18, 2017

          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

          Terms & ConditionsAccessibility statement

          Loading footer...