猫头鹰旋转木马幻灯片全部渲染为一个堆叠块答案

【问题标题】：Owl Carousel Slides all render as one stacked block猫头鹰旋转木马幻灯片全部渲染为一个堆叠块
【发布时间】：2017-10-04 20:49:17
【问题描述】：

下面是我的一个非常基本的猫头鹰旋转木马的代码。它意味着在任何时候都只显示一个图像/幻灯片，但此刻我最终会在一张幻灯片中看到一堆所有这些图像。我确定我一定是在做一些非常明显的错误。

<ul class="showcasecarousel">

    <li class="item"><img src="img/trackback.png" alt="Some text here"></li>
    <li class="item"><img src="img/trackback.png" alt="Some text here"></li>
    <li class="item"><img src="img/trackback.png" alt="Some text here"></li>

</ul>

我的 HTML 文件底部的 JavaScript 是：

$('.showcasecarousel').owlCarousel({
   navigation : false, // Show next and prev buttons
   slideSpeed : 300,
   paginationSpeed : 400,
   singleItem: true,
   loop: true,
});

最后，我的 CSS 是：

.showcasecarousel .item img{
    display: inline;
    width: 100%;
    height: auto;
}

Owl Carousel 和 JavaScript 的 CSS 和 JS 文件也已正确包含 - 同一页面上还有其他轮播，它们工作正常。任何帮助将不胜感激。

【问题讨论】：

当我在 Chrome 上检查它时，它们显示为三个不同的 div，但都是“owl-item active”类 - 我想应该只有这个类之一？
你能创建一个 jsfiddle 吗？
我尝试过，但我不确定如何将 OwlCarousel 加载到其中
任何控制台错误？删除自定义 CSS（猫头鹰完成这项工作）？
来自文档：“类“owl-carousel”对于应用来自 owl.carousel.css 文件的正确样式是强制性的。

标签： jquery html css owl-carousel

【解决方案1】：

我想你忘记了items 属性。在您的 javascript 中插入 items: 1,。还有为什么 twitter-bootstrap 被标记？再看看 owl-carousel 文档：https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

【讨论】：

items:1 应该包含在singleitem: true 行中，不幸的是。抱歉，我记错了 - 现在已修复！