javascript - 为什么我的猫头鹰轮播将我所有的元素都放在一张幻灯片中？

Question

我有一个这样的html结构：

<div class="header-top">
    <div class="container">
        <div class="row iconstop">
            <div class="owl-top owl-theme">
              <div class="item">
                <i class="winkelmand"></i>
                <span>GRATIS VERZENDING</span>
              </div>
              <div class="item">
                <i class="hout"></i>
                <span>OVEN DROOG GARANTIE</span>
              </div>
              <div class="item">
                <i class="snel"></i>
                <span>LEVERING BINNEN 48 hr.</span>
              </div>
              <div class="item">
                <i class="prijs"></i>
                <span>LAAGSTE PRIJS VAN NEDERLAND</span>
              </div>
            </div>
        </div>
    </div>
</div>

我需要这些元素是轮播中的幻灯片：

<div class="item">
    <i class="winkelmand"></i>
    <span>GRATIS VERZENDING</span>
</div>

但是由于某种原因，所有元素都出现在一张幻灯片中？

为什么会这样，我注意到一个类似的问题，但答案是他使用了旧的 jQuery 版本和新的 owl carousel。我不是这种情况，我得到了最新的 jquery 版本和最新的 owl carousel 文件。

这是一个 jsfiddle 来演示我的意思：

https://jsfiddle.net/sxwm9ng3/

据我所知，我按照猫头鹰轮播网站上的说明做了所有事情。

标签： javascriptjqueryowl-carousel

Answer 1

您需要申请 owl-carousel 类

<div class="owl-carousel">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

此类将为 owl slider 工作提供必要的 css 属性...

https://jsfiddle.net/RACCH/2yjv7eza/2/