javascript - OWL Carousel 图片一开始大小不合适

Question

我正在使用 OWL Carousel 并且我已经对其进行了编码，因此将显示一个图像，然后每 15 秒就会滑入下一个图像。我已将宽度设置为屏幕的 100%，因此并对 js 进行了适当的编码所以从理论上讲，一次应该有一个完整尺寸的图像......但是发生的是它显示所有图像相当小，然后如果我将屏幕大小调整甚至 1 个像素它会捕捉到它应该的样子...... .

关于如何避免必须调整屏幕大小以获得全尺寸图像的任何想法？

这是我的 HTML

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

这是我的代码

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

Answer 1

原因可能是以下之一:

1. 要么在加载 DOM 之前调用 owl.owlCarousel 方法。因此，请尝试在准备好文档的情况下启动它。
2. 或者您的 .owl-carousel div 可能位于加载 DOM 时不可见的容器内。

我在引导模式中使用 owl carousel 时遇到了类似的问题，通过在引导模式的 shown 事件中启动 owlCarousel 解决了这个问题。

如果您需要有关此问题的更多详细信息或已修复它，请告诉我。