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

})