How to add multiple child carousel into one carousel?

Get Help
1

ListMovies: {
ref: “Listofmovies”,
x: 90,
y: 200,
w: 1920,
h: 200,
type: Carousel,
direction: “column”
}

I want to add few Carousels into this “ListMovies” when _onDataProvided() function is called. how to achieve this?

1 Like
2

All you have to do is have a parent carousel and have it’s items be an array of carousels

Example:

ListMovies: {
    ...
    type: Carousel,
    direction: 'column'
    items = [
        {
            type: Carousel,
            direction: 'row',
            items: [
                { ... },
                { ... }
            ]
        },
        { another carousel/some content },
        ...
    ]
}

If you wanted to add the items dynamically outside of the template, then don’t include the items key for the carousel in the template and simply do:

_setup() {
    const items = [
        {
            type: Carousel,
            direction: 'row',
            items: [
                { ... },
                { ... }
            ]
        },
        ...,
    ]

    this.tag('ListMovies').add(items)
}
4

Thank you so much for your help :innocent:

6

There was a problem. I add 6 carousels in ListMovies but when scroll down once to the last carousel and switch to the first one the carousel is not showing in my screen. how to solve this issue?

7

Do you have to change the Y position of ListMovies to go back up? You can use smooth to “scroll” back up.

1 Like
8

working fine. Thank you @chiefcll