为什么我的 owl 轮播将我所有的元素放在一张幻灯片中？

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 轮播。我不是这样，我得到了最新的 jquery 版本和最新的 owl 轮播文件。

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

https://jsfiddle.net/sxwm9ng3/

据我所知，我按照 owl 轮播网站上的说明进行了所有操作。

Answer 1

您需要应用 owl-carousel class

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

此 class 将为 owl 滑块提供必要的 css 属性...

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

为什么我的 owl 轮播将我所有的元素放在一张幻灯片中？

Why is my owl carousel putting all my elements into one slide?

javascript

jquery

owl-carousel