Level 3

Solved

create Scrolling container

4 replies
1618 views
Translate All

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.

MayurSatavAccepted solution

Community Advisor

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

Saravanan_Dharmaraj

Community Advisor

@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

Translate

T

tatrivedAuthor

Level 3

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

?

Translate

MayurSatav

Accepted solution

Community Advisor

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.

Translate

Mayur Satav | www.mayursatav.in

BrianKasingli

Adobe Champion and Community Advisor

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.

Translate

Sign up

Login with SSO

Login to the community

Login with SSO