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>

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

Answer 1

原因可能是以下之一：

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

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

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