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')
})

Solution

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.

Comments

[Joshua Taylor]

Please be sure to read the descriptions of the tags you put on your questions. This is not a question about the Web Ontology Language (owl), but about the OWL Carousel (owl-carousel).

[Joshua Taylor]

Also, it would probably help if you show some code. Otherwise, how can people identify what you could change in it?

[RubberDucky4444]

Thank you for your input, I added my code

[RubberDucky4444]

Thank you, I was calling the carousel before the DOM was loaded. It works great now!

[Ramesh]

@Nitish please check out this question : stackoverflow.com/questions/52073169/…