【发布时间】：2014-08-11 10:10:00
【问题描述】：
我在尝试将 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
});
})
如果您访问this page，您可以在DOM 中搜索owl-slider 并看到这个输出，这显然是错误的：
我尝试了各种方法，延迟加载图像，使用 lorem 像素而不是嵌入图像，但似乎无法修复该网站。然而，我在这里有一个完美的原型JSFiddle。任何人都可以为我提供解决方案或一些建议以继续尝试吗？
【问题讨论】：
-
你的小提琴很好用吗？我的猜测是你已经在某些东西上设置了 display none 这意味着你的滑块在加载时没有正确计算宽度（因为 display none 项目的宽度将为 0）
-
@Pete 我也将我的 JSFiddle 包含在问题中 - 据我所知，我没有明确设置类似的东西。从所有这些元素中删除宽度 0 会显示图像（但在垂直布局中，因为包装器的宽度是错误的）。
-
尝试将
float:left关闭.sliderBox。 -
@Pete：我已经在我链接的网站上进行了回顾性尝试 - 这不适合它，我认为这不会影响 owl-carousel 计算？
-
我查看了该站点，我认为由于 div 向左浮动，因此当 js 运行时，其中所有内容的计算都为零 - see this updated fiddle。我不确定为什么滑块框需要向左浮动，因为它的两侧都没有任何东西。如果它确实需要浮动，那么给它一个宽度。 Ps 为我向 adj 和 chris 打招呼！
标签： css owl-carousel