OWL Carousel image not right size at first

Question

I am using OWL Carousel and I have coded it so there will be one image displayed and then every 15 seconds the next image will slide in. I have set the width to be 100% of the screen so and coded the js appropriately so in theory there should be ONE image at a time at full size....however what happens is it shows all the images rather small and then if i resize the screen even 1 pixel it snaps into how it should be.....

any idea on how to avoid having to resize the screen to get the image to be full sized ?

Here is my HTML

<div class="owl-carousel">
    <img src="assets/background1.jpg" />
    <img src="assets/background2.jpg" />
    <img src="assets/background3.jpg" />
</div>

Here is my js

var owl = $('.owl-carousel');
owl.owlCarousel({
    singleItem: true,
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:15000,
    autoplayHoverPause:true


});
$('.play').on('click',function(){
    owl.trigger('autoplay.play.owl',[1000])
})
$('.stop').on('click',function(){
owl.trigger('autoplay.stop.owl')
})

Answer 1

Reason could be one of the following:

1. Either you're calling the owl.owlCarousel method before the DOM is loaded. So try initiating it in document ready.
2. Or your .owl-carousel div might be inside a container that is not visible when the DOM is loaded.

I faced a similar issue for using owl carousel in a bootstrap modal and it was fixed by initiating owlCarousel in the shown event of bootstrap modal.

Let me know if you need more details on this or you got it fixed.