jquery - Owl Carousel 将所有幻灯片渲染为一个堆叠 block

Question

下面是我的一个非常基本的 Owl Carousel 的代码。它意味着在任何时候都只显示一张图像/幻灯片，但此刻我最终在一张幻灯片中显示了一堆所有这些图像。我确信我一定做了一些非常明显错误的事情。

<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 轮播和 JavaScript 的 CSS 和 JS 文件也已正确包含 - 同一页面上还有其他轮播，并且它们工作正常。任何帮助将不胜感激。

Answer 1

我认为您忘记了 items 属性。在您的 JavaScript 中插入 items: 1,。另外为什么 twitter-bootstrap 被标记？再看一下 owl-carousel 文档:https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html