create Scrolling container | Community
Skip to main content
T
tatrived
Level 3
May 16, 2023
Solved

create Scrolling container

  • May 16, 2023
  • 3 replies
  • 1585 views

Hi,
is there any documentation in creating scrolling container, horizontal scroll where we can add any no of other component inside it 
let me know 
Thanks!

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 MayurSatav

Hi @tatrived ,

 

You can use the carousel component. It allows you to include various components within each item. However, it is important to ensure proper handling of the UI. Typically, image, video, or teaser components are used in carousel items. If you intend to add miscellaneous or non-standard components, it is crucial to handle their UI appropriately and ensure compatibility with all associated components.

 

 

<sly data-sly-resource="${'carousel' @ resourceType='myproject/components/carousel'}"> <sly data-sly-repeat="${carousel.items}" data-sly-unwrap> <div class="carousel-item"> <div class="carousel-content"> <!-- PARSYS for including various components --> <div class="carousel-parsys" data-sly-resource="${'carousel-parsys' @ resourceType='wcm/foundation/components/parsys'}"></div> </div> </div> </sly> </sly>

 

 

In the above code, we have a carousel component that iterates through a list of items defined in the carousel resource. Within each carousel item, there is a carousel-content container where you can include various components using a parsys. The parsys is represented by the carousel-parsys resource type.

3 replies

Saravanan_Dharmaraj
Community Advisor
Saravanan_DharmarajCommunity Advisor
Community Advisor
May 16, 2023

@tatrived Are you looking for something like this where you show the components like a card view and the users can scroll horizontally ? 

https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

 

You can also check the carousel component

https://www.aemcomponents.dev/content/core-components-examples/library/core-content/carousel.html

 

 

    T
    tatrivedAuthor
    Level 3
    May 16, 2023

    Thank you 🙂 yes i am looking for this but with carousel component is it possible if yes do you have any documents or input on this

    ?

      MayurSatav
      Community Advisor and Adobe Champion
      MayurSatavCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      May 16, 2023

      Hi @tatrived ,

       

      You can use the carousel component. It allows you to include various components within each item. However, it is important to ensure proper handling of the UI. Typically, image, video, or teaser components are used in carousel items. If you intend to add miscellaneous or non-standard components, it is crucial to handle their UI appropriately and ensure compatibility with all associated components.

       

       

      <sly data-sly-resource="${'carousel' @ resourceType='myproject/components/carousel'}"> <sly data-sly-repeat="${carousel.items}" data-sly-unwrap> <div class="carousel-item"> <div class="carousel-content"> <!-- PARSYS for including various components --> <div class="carousel-parsys" data-sly-resource="${'carousel-parsys' @ resourceType='wcm/foundation/components/parsys'}"></div> </div> </div> </sly> </sly>

       

       

      In the above code, we have a carousel component that iterates through a list of items defined in the carousel resource. Within each carousel item, there is a carousel-content container where you can include various components using a parsys. The parsys is represented by the carousel-parsys resource type.

      Mayur Satav | www.mayursatav.in
        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        May 16, 2023

        I would use AEM Style System for this approach. Using the style system will require CSS changes only. Say for example, if your container has an active style system of "Verticle Scroll", then this CSS class name will be appended at the root level of the component... looking at the root element of that given component, you can target the "Verticle Scroll" appliedStyles, and play around with the CSS to get the vertical scrolling experience.

         

        AEM Style System will be a CSS change only.

          Terms & ConditionsAccessibility statement

          Loading footer...