OWL旋转木马图片不正确的大小 [英] OWL Carousel image not right size at first

问题描述

我使用OWL Carousel，我已经编码它，所以会有一个图像显示，然后每15秒，下一个图像将滑入。我已经设置宽度为屏幕的100％，并编码的js适当所以在理论上，应该有一个图像在一个时间在全尺寸....但是发生什么是显示所有的图像相当小，然后如果我调整大小的屏幕，即使1像素它咬合到怎么应该.... 。

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 ?

以下是我的HTML

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

以下是我的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')
})

推荐答案

原因可能是以下之一：

1. 在加载DOM之前调用owl.owlCarousel方法。


2. 或者您的.owl-carousel div可能位于在加载DOM时不可见的容器内。

我在启动模式中使用猫头鹰旋转木马时遇到了类似的问题，并且通过在显示中启动owlCarousel

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.

这篇关于OWL旋转木马图片不正确的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！