How to get images dynamically From Odoo to banner image slider?

[Nirmala]

I want to create a dynamic Image slider in Odoo15. I have seen many examples of creating product sliders in Odoo but no example of banner image sliders. I want to create image sliders like the below app store

https://store.webkul.com/Odoo-Website-Banner-Slider.html

The user wants to add Images for the slider in the front end. I am able to achieve creating static image slider using the below example

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

Can anyone help me to create the dynamic banner image slider? Looking forward to the help.

thanks and regards

Nirmala Sudhir

[Ruksar Moosa Sait]

Hi Nirmala,

We have prepared a sample to create the dynamic banner image slider using our EJ2 Carousel component. Here we have defined a list of items (slides) and updated the new items on a button click like the below code. Kindly try the shared sample and let us know if this meets your requirement.

Sample: https://stackblitz.com/edit/ej2-carousel-binding-dynamic-data?file=index.js

var carouselData = [];

    if (items.length > 0) {

        for (var i = 0; i < items.length; i++) {

            var updatedData = items[i];

            carouselData.push({

                Title:updatedData.Subject,

                Content:updatedData.Description,

                ImgPath:updatedData.Img,

                URL:updatedData.Url

            });

        }

    }

    carouselObj.dataSource = carouselData;

Regards,

Ruksar Moosa Sait

[Wil van Antwerpen]

Hi,

We are having this poblem too.

The example above works, but only if you replace it with the exact same amount of slides.

When you edit the replacement to insert either 3 slides or 5 slides.. the carousel stops working.

Is there a solution for this?

Thanks!

--

Wil

[Satheesh Kumar Balasubramanian]

Hi Wil,

Your reported problem "Item gets broken when dynamically updating the datasource in the Carousel" is considered as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out at the end of July. You can track the status of the fix using the following link.

Feedback:  https://www.syncfusion.com/feedback/45358/item-gets-broken-when-dynamically-updating-the-datasource-in-the-carousel

Regards,
Satheesh Kumar B

[Swathi Ravi]

Hi Wil,

We are glad to announce that our Essential Studio 2023 Volume 2 SP release v22.2.5 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/183720/essential-studio-2023-volume-2-service-pack-release-v22-2-5-is-available-for-download

In this release, we have fixed the issue with items get broken while dynamically changing the data source of the Carousel. So we suggest upgrading your package version to the latest to avail of this fix.

Release notes: https://ej2.syncfusion.com/javascript/documentation/release-notes/22.1.39/?type=all#carousel

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Swathi Ravi

[Wil van Antwerpen]

Thanks, it works now.

--
Wil

[Satheesh Kumar Balasubramanian]

Wil, You are most welcome.