How to create a dynamic carousel based on api response?

[Arunprasanth]

I need to create dynamically populated carousel based on api response. The number of carousel also dynamic. I have created a carousel component for the same, and based on the api response I will call the component with the object as argument, this way I hope I can get the n number of carousel in the UI. But unfortunately my attempts doesn't work out here.

 var playlistcontainer = new ComponentContainer("playlistcontainer");
                var headercontainer = new ComponentContainer("headercontainer");
                var playlistcontainer1 = new ComponentContainer("playlistcontainer1");
                
                headercontainer.show("application/appui/components/commonheader");
                playlistcontainer.show("application/appui/components/playlist");
                playlistcontainer1.show("application/appui/components/playlist");

                

                this._verticalList = this._createVerticalList(
                    [
                       playlistcontainer,
                        headercontainer,
                        playlistcontainer1
                    ]
                );
                this.appendChildWidget(this._verticalList);

My dom tree is like below

Please help me to resolve this issue.

[Arunprasanth]

I have found the answer finally, we can pass the data as argument of datasource then get the argument as pass it to formatter and do whatever we want.
data will be the data you we may get from the api
ds = new DataSource(null, dataSourceObject, 'loadData', data);

Then in datasource file

  function bindArgumentData(item) {

            var get = function () {
                return new Promise(function (resolve, reject) {

                    if (item) {
                        resolve(item.contentList);
                    } else {
                        reject("Error");
                    }

                });
            };
            return get();

        }
        return Class.extend({
            loadData: function (callbacks, item) {
                bindArgumentData(item).then(callbacks.onSuccess);

            }
        });

[Tanya Byrne]

We have deprecated this project and there are no plans for active development going forward.

Please see the deprecation notice.