javascript - Owl Carousel - 宽度计算错误

Question

我有三个响应式元素 (imgs)，但每次加载 Owl-Carousel 时，owl-wrapper 的宽度都是所有图像大小的两倍。 例如;如果图像全尺寸需要 1583 像素，owl-wrapper 需要 1583 * 3 * 2 = 9498 像素，并且所有网站都采用这个宽度，而不是全尺寸(1583 像素)。

问题: http://nacionalempreendimen.web2144.uni5.net

HTML

<div id="promoted-carousel">
    <div class="item"><img src="assets/img/tmp/1.jpg"></div>
    <div class="item"><img src="assets/img/tmp/2.jpg"></div>
    <div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>

CSS

#promoted-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

JS

$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});

更新

我看到当我将 #promoted-carousel div 放在 .page-wrapper div 之外时，它工作正常。但是我对 css 的了解不足以理解它的工作原理。

Answer 1

它帮助了我:

setTimeout(function() {
    $('#promoted-carousel').owlCarousel({
        autoPlay: 5000,
        stopOnHover: true,
        singleItem: true
    });
}, 10);