OWL Carousel image first does not match the correct size

Question

I use OWL Carousel and I encoded it so that one image will be displayed, and then every 15 seconds the next image will slide. I set the width to 100% of the screen and encoded js accordingly, so in theory there should be ONE image at a time in full size .... however, what happens is that all the images are pretty small, and then if I change the size screen even 1 pixel, it clicks into how it should be .....

Any idea on how to avoid resizing the screen to get the full size image?

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

The reason may be one of the following:

• Or you call the owl.owlCarousel method before loading the DOM. Therefore, try to run it in the finished document.
• Or your .owl-carousel div may be inside a container that does not appear when loading the DOM.

I ran into a similar problem for using an owl carousel in the bootstrap module and was fixed by triggering owlCarousel in the shown bootstrap modal event.

Let me know if you need more information about this, or you fixed it.