I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ideally only one image should be displayed at full size. However, what actually happens is that all the images appear rather small initially, but if I resize the screen by even just 1 pixel, it suddenly snaps into the correct display...
Any suggestions on how to prevent this issue and ensure that the images are shown at full size without having to resize the screen?
This is the HTML code:
<div class="owl-carousel">
<img src="assets/background1.jpg" />
<img src="assets/background2.jpg" />
<img src="assets/background3.jpg" />
</div>
Below is the JavaScript code:
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')
})