javascript OWL Carousel 图像起初尺寸不合适
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27006239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OWL Carousel image not right size at first
提问by RubberDucky4444
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.....
我正在使用 OWL Carousel 并对其进行编码，因此将显示一个图像，然后每 15 秒滑入下一张图像。我已将宽度设置为屏幕的 100%，因此理论上对 js 进行了适当的编码一次应该有一个全尺寸的图像....但是发生的情况是它显示的所有图像都相当小，然后如果我调整屏幕大小甚至 1 个像素，它就会捕捉到它应该如何.....
any idea on how to avoid having to resize the screen to get the image to be full sized ?
关于如何避免必须调整屏幕大小以获得全尺寸图像的任何想法？
Here is my HTML
这是我的 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
这是我的 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')
})
回答by Nitish
Reason could be one of the following:
原因可能是以下之一：
- Either you're calling the owl.owlCarousel method before the DOM is loaded. So try initiating it in document ready.
- Or your .owl-carousel div might be inside a container that is not visible when the DOM is loaded.
- 要么在加载 DOM 之前调用 owl.owlCarousel 方法。所以尝试在文档就绪时启动它。
- 或者您的 .owl-carousel div 可能位于加载 DOM 时不可见的容器内。
I faced a similar issue for using owl carousel in a bootstrap modal and it was fixed by initiating owlCarousel in the shownevent of bootstrap modal.
我在引导模式中使用 owl carousel 时遇到了类似的问题，并且通过在引导模式的情况下启动 owlCarousel 来修复它shown。
Let me know if you need more details on this or you got it fixed.
如果您需要更多详细信息或已修复，请告诉我。
