Card Carousel Component

[Vineeee]

Description

As a developer:

I want the carousel component to dynamically pull content from content fragments that are set in the components dialog properties o that the content can be updated in the fragments and automatically displayed in the carousel.

Acceptance Criteria:

The author sets the list of content fragments in the components dialog then the component fetches content from selected content fragments.

Content fragment details (e.g., title, description, images) are displayed correctly within each slide.

Changes in content fragments reflect in the carousel component without manual updates.

Can anyone provide any example or anything related to this will be really helpful and here what is the exact expections would help me.

Regards

Vinith M

[Tethich · Accepted solution]

Hi @Vineeee 

On simple straight forwars way yhat I see is this:

• Add a mtifield to your component
• The item in the mutifield you be a simple Granite path selector field that will hold path to your CF.
• In this was you can add as many dialog items you like
• Each dialog item will represent a carousel item
• Then have a Sling model that reads all this dialog items, extract the path to CF and reads the CF data
• Have some HTL code in your component that uses the model to get the CFs data and assume to pass it on to some UI component that actuall renders the carousel

[Tethich]

PS: Sorry for the typos. I responded from mobile, and it seams the responsive site does not have Edit option to my comment.

[Vineeee]

@Tethich Thank you so much for explaining me in the simple terms

[PRATHYUSHA_VP]

Hi @Vineeee 

Please find the below example you are looking for - 

1. Provide a CF path in dialog as below 

GitHub core component examples :

https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wc...

https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/w...

2. Read the CF path in sling model, retrieve the properties using Content Fragment API and implement getters and setters for  title, description and images 

Core component content fragment is implemented this way, you can check the implementation and override the component 

Hope this helps ! 

Thanks

Prathyusha

[Vineeee]

Thank you @PRATHYUSHA_VP  it did help me understand much more.

[arunpatidar]

Hi @Vineeee 
You can use core carousel component and add items as content fragments, and browse the content fragment

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/c... 

[Vineeee]

Thank you @arunpatidar I will try to do it.

[Vinithm2]

Hi @arunpatidar 

Can u please  explain with some more steps it would be  really helpful.Add items as Content Fragments should it be done programatically from Sling Model? or any other way.

[Vinithm2]

Hi @arunpatidar,
Thank you for your suggestion! Could you please explain the steps in more detail? Specifically:

• Should the items (slides) be added as Content Fragments programmatically using a Sling Model?
• Or is there an out-of-the-box way, like updating the Core Carousel Component dialog to select Content Fragments?
  Your guidance would be really helpful.

[arunpatidar]

Hi @Vinithm2 

Step1 - Allow content fragment component in the allowed component list from Carousel component 's policy

Step2 - Identify content fragment Items to create card and write CSS , step mentioned by @PRATHYUSHA_VP 

you don't need to override anything until you can manage styling of content fragment model using CSS.

[kautuk_sahni]

@Vineeee  Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!