Javascript 猫头鹰转盘-宽度计算错误

我有三个响应项（IMG），但每次加载Owl转盘时，Owl包装宽度是所有图像大小的两倍。 例如如果图像的全尺寸为1583px，owl包装将采用1583*3*2=9498px，所有站点都采用此宽度，而不是全尺寸（1583px）

问题是：

HTML

JS

更新

---

我看到当我把

#promoted carousel

div从

.page wrapper

div中取出时，它工作正常。但是我对css的了解还不足以理解它的工作原理。

这个问题是一个已知的问题。您需要将

表格布局：固定
放在表格上

在使用猫头鹰转盘时，我经常使用两个包装器。我为每张幻灯片设置了所有样式，包括高度/宽度等，并为舞台宽度等设置了外包装

然后，我调用内部包装上的owl转盘，我通常很少遇到问题

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

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

帮助我的是删除
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。
它帮助我：

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

这个解决方案对我也有帮助，如果你的主题使用BootStrape4，而owl插件使用BootStrape3，这将解决owl宽度问题

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

尝试在
#main
CSS中放置以下内容：
overflow:hidden
，然后查看是否works@GiovanniPerillo#main还是.main？我尝试了.main css，但没有成功。
#main
，表示它是一个ID，因为当我检查元素时，它是旋转木马div之前的div。如果它的溢出被隐藏，如果大于100%，它将隐藏它。您使用的是哪个版本的猫头鹰旋转木马？您的代码有更新的URL吗？尽管这已被标记下来，但在我头撞墙数小时后，它为我解决了问题。
    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();
    },

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

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