Owl Carousel is not working on adding images to it dynamically.

[MayankValechha]

Currently I'm working on a small eCommerce project, I'm using Parse Server in Back4app.com.

I'm using Owl Carousel for showing the images. When I manually add images in a .owl-carousel class It is working fine.

But when I add images to the .owl-carousel class from my Parse Server, It is not showing that Images in a Carousel,

I am using vanilla JavaScript to create elements and show in a div.
Here is my HTML Code -

<div id="ads" class="owl-carousel">
 
</div>

Here is my JS Code -

let output = '';
var query = new Parse.Query('Offers');
query.find().then(function(result){
     for(let a in result){
     output += 
           '<img src="'+result[a].get('offerImage').url()+'">';
       }
        document.getElementById('ads').innerHTML = output; 
});

Output Images is also attached, you can see that above all the images are inside a .owl-carousel class.
Any Help on this topic will be appreciable.
Thanks!

[keefyhub]

I think this is because the carousel is being initialised before the images are loaded. If you can trigger a refresh after the images have been inserted it should work

$('#ads').trigger('refresh.owl.carousel');

or only initialise the carousel after your image query has finished

[MayankValechha]

@keefyhub I tried this refreshing approach in a different way and it worked for me!
Thanks! <3