为什么我的owl-items宽度为0px？

Question

当我试图将owl-carousel与网站集成时，遇到了问题，尽管在独立的原型中它运行良好。基本上，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
    });
})

如果您访问此页面，您可以在DOM中搜索owl-slider并查看此输出，这显然是错误的： 我尝试了各种方法，如延迟加载图像，使用lorem pixel代替嵌入式图像，但似乎无法修复该网站。然而，我在这里有一个完美工作的原型JSFiddle。是否有人能为我提供解决方案或建议继续尝试的事情？

- Ian

---

你的代码没问题吧？我猜你在某个元素上设置了display:none，这意味着当加载滑块时它无法正确计算宽度（因为display:none的元素宽度为0）。 - Pete

@Pete 我已经在问题中包含了我的 JSFiddle - 据我所知，我没有显式地设置任何类似的东西。从所有这些元素中删除宽度为0会显示图像（但由于包装器的宽度有误，它们会以垂直布局显示）。 - Ian

尝试将 .sliderBox 的 float:left 去掉。 - Pete

我看了一下这个网站，我认为因为div向左浮动，当js运行时它内部的所有计算都会变成零 - 请参见此更新的fiddle。我不确定为什么sliderBox需要向左浮动，因为它两侧都没有任何东西。如果确实需要浮动，则给它一个宽度。顺便问候adj和chris！ - Pete

这是关于设置容器宽度的内容。 - Murhaf Sousli

Answer 1

似乎在包含div“ .sliderBox”的猫头鹰走马灯上使用“ float：left”会导致问题。删除此样式或为“ .sliderBox” div设置宽度应该可以解决您的问题。

- Pete