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.
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.
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.
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.
Adding to my previous reply The carousel is working in classic UI (edit mode) but not in Touch UI(edit mode).
Must be an issue with the lib you are using - we created a carousel using a JQUery plug-in and it works fine.
I have created a sample carousel project using slick js, following is the link for the same
Note:- I am currently working on AEM 6.2
@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:
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..
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.
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..