Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Custom Carousel/Slider component using Sightly

Avatar

Level 4

I have a requirement to develop a custom carousel using Sightly, but there really isn't a lot of documentation out there, and I'm not sure where to start, or exactly how to go about it. There are several good javascript carousel/slider components, and I'm wondering if I should try to use one of them, or simply develop it from scratch using Java/JSP. If anyone can summarize the steps, provide tutorials orany other links and material you can share, it would be greatly appreciated. The most important thing is to develop this component in a manner that embodies best practices such as a good separation of presentation and business logic, (MVC'ish architecture), and loose coupling from a styling perspective.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Refer [1] to create a sightly template and read values from the dialog 

[1] https://helpx.adobe.com/experience-manager/using/creating-sightly-component.html

Refer [2] for multiple taglibs available in Sightly. It helps you to in #2 to loop through all the images and create div

[2] https://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html

For #3, once you have read the values and created div, apply JS to get the carousel running.

View solution in original post

14 Replies

Avatar

Level 10

Can I ask why use Sightly - not JSP? 

There are a lot of good plug-ins available that will let you use JS libs to achieve this use case. For example: 

https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Avatar

Level 10

Hi, 

This is simple, no need to get too much serious

1. First, With any slider / carousel available on internet, you get HTML + CSS + JS, get all these 3 thing and put in your code. Simple one is here @ http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

2. Make a dialog where user can author these images and captions.

Avatar

Employee

I would normally start with the HTML/markup, and then adding logic where needed.\

When using Sightly the logic can reside in either Java or Javascript, but not mixed in the markup.

Avatar

Level 4

Would someone please help? What are the steps needed to try and do this component using Sightly??? Thanks in advance.

Avatar

Level 4

So Feike, (or really, anyone who can provide an answer), are you saying that I would develop my function in JSP or JS, (e.g. a function to build <div>'s and <ul>'s and <li>'s based on the number of items I'm storing in the carousel), and then call them from Sightly??? I have gotten a JS plugin component working using static HTML, (i.e. the slick plugin), but I need to be able to get the properties from the AEM dialog, and dynamically create the HTML required for the number of items the author wants to display in the carousel. I can do this using JSP, mixed with some static HTML, but it's very ugly, (i.e. harder to read), and it's also tough because I have to instantiate different "slick" funtions based on the options that the author chooses from the AEM dialog, (e.g. when they want to display 4 slides instead of one, or when they want a responsive carousel etc.).

I'm also having a LOT of trouble implementing simple radio buttons, and having them register as true or false, based on whether the author selects the radio button. Also, once the radio is clicked, it doesn't seem that you can click it again, and deselect it. If any of you can help with these items and provide code samples, I would really, really appreciate it.

Avatar

Level 4

Thanks to both of you for the responses. I hope the Sightly documentation on the Adobe site is enough for me to use the base component you linked to get this done. Hopefully, I can find most of the core functionality/logic in existing javascript libs.

Avatar

Correct answer by
Level 10

Refer [1] to create a sightly template and read values from the dialog 

[1] https://helpx.adobe.com/experience-manager/using/creating-sightly-component.html

Refer [2] for multiple taglibs available in Sightly. It helps you to in #2 to loop through all the images and create div

[2] https://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html

For #3, once you have read the values and created div, apply JS to get the carousel running.

Avatar

Level 4

While I definitely do NOT want to recreate the wheel in any way, there should be some long term architectural advantages resulting from the use of Sightly. The components I build will be reusable Enterprise components, and will be built from granular building blocks of other generic components, (i.e. leveraging Adobe's "everything is a component" and is therefore reusable philosophy). We need to go ahead and tackle that learning curve and encourage other development groups in the organization to begin using Sightly, (and also, so they will be familiar with it when they use and extend the enterprise components to build their own). 

Sightly should help us achieve a good separation of presentation and logic, (with its MVC'ish architectural structure), and most importantly, hopefully we can push some of the development tasks/burden, into the hands of front end developer, and possibly, even into the authorizing realm. As always, the ultimate goal is reducing development costs, and total costs of ownership for I.T.. I'm certainly hoping to be able to still leverage the JS libs, plugins, and even existing JSP functionality whenever it's available.

Avatar

Level 10

You can surely integrate the carousel that are available and make it a component. Create a dialog to feed the data for those scripts.

See if [1] helps you in using radio buttons

[1]  https://helpx.adobe.com/experience-manager/using/creating-custom-cq-component-uses.html

Avatar

Level 4

Thank you so much!, (and to others who have shared ideas as well).

Avatar

Level 4

What I need to be able to do is the following:

1) Retrieve a user supplied List from the component dialog that could contain images, videos and/or hyperlinked web pages from elsewhere on the site

2) Use Sightly to take that list and create the correct <div> for the Slick carousel component, (e.g. <iframe> if it's video, regular div if it's an image, add href if it has a hyperlink etc.).

3) Initiate the Slick carousel and let it operate on the <div> structure I've created.

 

I know I will probably have to write some javascript functions for step 2, (and simply call them from Sightly), but any help on how to do the other things with Sightly would be greatly appreciated.

Avatar

Level 2

Is there any OOTB working carousel component present in AEM which we could leverage ?
i did found carousel component present in We.Retail , but on using that component , it wasn't working as i expected to work.
Could you confirm, whether its working or not ? 

Avatar

Level 2

But i was wondering how to make We.retail or OOTB carousel component work ?
can it  be made work , is there any documentation for the same ?