Expand my Community achievements bar.

SOLVED

Creating custom carousel component with teaser component.

Avatar

Level 1

Dear All, Currently I am developing custom carousel by including teaser componet.

I am referring to https://www.aemcomponents.dev/content/core-components-examples/library/core-content/carousel.html

But I didn't get where to add JSON code and HTML code which was mentioned on that page.

 

Could someone please explain me how to create carousel custom component with teasers to use in my site.

 

Thanks in advance.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @kodanda ,

The component in above link is an AEM core component demonstration page - you may find the actual code on github here: https://github.com/adobe/aem-core-wcm-components
You can implement new custom component by extending to this core component and follow delegation pattern.

Reference for Carousel Component: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/carousel...

Delegation Pattern: https://github.com/adobe/aem-core-wcm-components/wiki/Delegation-Pattern-for-Sling-Models

Image Component Delegation: https://kiransg.com/2021/11/07/aem-core-component-delegation/

Hope thats helps!

Regards,
Santosh

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @kodanda ,

The component in above link is an AEM core component demonstration page - you may find the actual code on github here: https://github.com/adobe/aem-core-wcm-components
You can implement new custom component by extending to this core component and follow delegation pattern.

Reference for Carousel Component: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/carousel...

Delegation Pattern: https://github.com/adobe/aem-core-wcm-components/wiki/Delegation-Pattern-for-Sling-Models

Image Component Delegation: https://kiransg.com/2021/11/07/aem-core-component-delegation/

Hope thats helps!

Regards,
Santosh