Question

我有三个响应项（imgs），但每次加载Owl-Carousel时，owl-wrapper宽度是所有图像大小的两倍。例如;如果图像全尺寸需要1583像素，猫头鹰包装需要1583 * 3 * 2 = 9498px，所有网站都采用这个宽度，而不是全尺寸（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

在使用Owl Carousel时经常使用2个包装器。我将每张幻灯片的所有样式设置为它们的高度/宽度等，以及我为舞台宽度等设置的外部包装。

然后我在内包装上调用owl carousel，我通常只有很少的问题

<div id="promoted-carousel-outer">
    <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>
</div>

Answer 2

此解决方案也对我有帮助，如果您的主题使用bootstrape 4，而owl插件使用bootstrape 3，则可以解决owl width问题

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

Answer 3

令人难以置信的是，我怀疑这可能是owlCarousel中的一个错误。

帮助我删除* 2中的appendWrapperSizes：

    appendWrapperSizes : function () {
        var base = this,
            width = base.$owlItems.length * base.itemWidth;

        base.$owlWrapper.css({
            "width": width,//Comment out this part=> * 2,
            "left": 0
        });
        base.appendItemsSizes();
    },

这适用于owlCarousel 1.3.3。

Answer 4

它帮助了我：

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

Answer 5

此问题是一个已知问题。您需要将table-layout: fixed放在桌面上。

https://github.com/OwlFonk/OwlCarousel/issues/274

猫头鹰旋转木马 - 宽度计算错误

5 个答案: