Card Carousel Component | Community
Skip to main content
V
Vineeee
Level 2
November 13, 2024
Solved

Card Carousel Component

  • November 13, 2024
  • 4 replies
  • 2099 views

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

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 Tethich

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

4 replies

Tethich
Community Advisor
TethichCommunity AdvisorAccepted solution
Community Advisor
November 13, 2024

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
    Community Advisor
    TethichCommunity Advisor
    Community Advisor
    November 13, 2024

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

     

      PRATHYUSHA_VP
      Community Advisor
      PRATHYUSHA_VPCommunity Advisor
      Community Advisor
      November 14, 2024

      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/wcm/components/contentfragment/v1/contentfragment

       

      https://github.com/adobe/aem-core-wcm-components/blob/main/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/contentfragment/ContentFragmentImpl.java

       

       

      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

        V
        VineeeeAuthor
        Level 2
        November 14, 2024

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

          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          November 14, 2024

          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/carousel#items-tab 

           

          Arun Patidar
            V
            VineeeeAuthor
            Level 2
            November 14, 2024

            Thank you @arunpatidar I will try to do it.

             

              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              November 25, 2024

              @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!

              Kautuk Sahni
              V
              VineeeeAuthor
              Level 2
              December 26, 2024

              Yes It was really helpful but i do not have the option to mark as correct answer please help me or if possible mark as the correct answer

               

              Terms & ConditionsAccessibility statement

              Loading footer...