css - 为什么我的猫头鹰元素的宽度=0px

Question

当我尝试将 owl-carousel 与网站合并时，我遇到了问题，尽管它在我的独立原型(prototype)中运行良好。本质上，owl-wrapper 和所有 owl-item 实例的内联宽度都设置为 0，我不知道为什么。

如果我手动移除这些元素的宽度，它不会修复轮播(尽管我不确定我是否也预料到了)。我正在使用一个相当基本的 owl-carousel 设置:

// Setup the owl-carousel slider once the document has loaded
$(document).ready(function () {
    $("#owl-slider").owlCarousel({
        autoPlay: 5000, //Set AutoPlay to 5 seconds
        singleItem: true,
        lazyLoad: true,
        lazyEffect: false
    });
})

如果您访问 this page你可以在 DOM 中搜索 owl-slider 并看到这个明显错误的输出:

我尝试了各种方法，延迟加载图像，使用 lorem 像素而不是嵌入图像，但似乎无法修复网站。然而我有一个完美的原型(prototype) JSFiddle这里。任何人都可以为我提供解决方案或一些关于继续尝试的建议吗？

Answer 1

似乎是在包含 div .sliderBox 的 Owl Carousel 上使用 float:left 导致了您的问题。

删除此样式或为 .sliderBox div 设置宽度应该可以解决您的问题。