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版本和新的猫头鹰轮播。事实并非如此，我得到了最新的jquery版本和最新的owl carousel文件。

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

https://jsfiddle.net/sxwm9ng3/

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

Answer 1

您需要应用owl-carousel类

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

此类将为猫头鹰滑块提供必要的css属性，以使其起作用...

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

为什么我的猫头鹰传送带将所有元素都放到一张幻灯片中？

1 个答案: