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

Owl Carousel - width is calculated wrong

本文关键字：计算 错误 旋转木马 猫头鹰      更新时间：2023-09-26

我有三个响应项（imgs），但每次加载猫头鹰旋转木马时，猫头鹰包装器的宽度是所有图像大小的两倍。例如如果图片的全尺寸为1583px，那么owl包装器的宽度为1583*3*2=9498px，所有站点的宽度都是这个宽度，而不是全尺寸（1583px）。

问题：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-carouseldiv从.page-wrapperdiv中取出时，它可以正常工作。但我对css的了解还不足以理解它为什么有效。

它帮助了我：

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

这个解决方案也帮助了我，如果你的主题使用bootstrape4，而owl插件使用bootstrapee3，这将修复owl宽度问题

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

在使用Owl Carousel时，我经常使用2个包装器。我会为每张幻灯片的高度/宽度等设置我的所有风格，并为舞台宽度等设置外包装。

然后我在内部包装上调用猫头鹰旋转木马，我通常很少遇到问题

<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>

这个问题是已知的问题。你需要把table-layout: fixed放在桌子上。

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

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

帮助我的是删除appendWrapperSizes:中的* 2

    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。

相关文章：