create Scrolling container

[tatrived]

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!

[Saravanan_Dharmaraj]

@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

[tatrived]

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 · Accepted solution]

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.

[BrianKasingli]

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.