Custom Carousel/Slider component using Sightly | Community
Skip to main content
au4liferz
au4liferz
New Participant
October 16, 2015
Solved

Custom Carousel/Slider component using Sightly

  • October 16, 2015
  • 14 replies
  • 8850 views

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.

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

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.

14 replies

Show previous replies
au4liferz
au4liferzAuthor
New Participant
October 16, 2015

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.

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
New Participant
October 16, 2015

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

au4liferz
au4liferzAuthor
New Participant
October 16, 2015

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

au4liferz
au4liferzAuthor
New Participant
October 16, 2015

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.

Terms & ConditionsAccessibility statement

Loading footer...