logo标签列表

猫头鹰走马灯 - 宽度计算错误

javascriptjqueryhtmlcssowl-carousel
7
我有三个响应式的项目（图片），但每次加载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知识不足以理解为什么它可以正常工作。

2
尝试在 #main 的 CSS 中加入 overflow: hidden，并查看是否有效。 - Giovanni Perillo
你正在使用哪个版本的Owl Carousel？ - Jitendra Khatri
希望问题不在 Owl Carousel 上！请查看此示例 http://jsfiddle.net/kishoresahas/u0d8L2z7/ - Kishore Sahasranaman
1
你的代码有更新后的URL吗？ - Rob Fyffe
如果你用一个解决方法修复了它，为什么不写下你的解决方法代码呢？ - Robocide
显示剩余3条评论
5个回答
3

它帮助了我：

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

这个解决方案对我也很有帮助。如果你的主题正在使用bootstrap 4而owl插件正在使用bootstrap 3，那么这个方法可以解决owl宽度问题。

"Original Answer"翻译成中文是"最初的回答"。

 setTimeout(function() {
$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});
}, 10);
1
我在使用Owl Carousel时通常会使用两个包装器。我会为每个幻灯片设置其高度/宽度等样式，并为外部包装器设置舞台宽度等。然后我在内部包装器上调用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>
0
0

难以置信，我怀疑这可能是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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接