create Scrolling container

Forum|Forum|2 years ago
May 16, 2023
3 replies
1578 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.

BrianKasingli

New Participant

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.

MayurSatavAccepted solution

New Participant

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.