Question

我无法让猫头鹰旋转木马主题样式表对我的滑块产生任何影响？

我使用的是最新版本owl.carousel.2.0.0-beta.3

以下是我的测试网站：example website

以下是与owl carousel相关的HTML代码：

<div id="owl-single" class="owl-carousel col-xs-12 owl-loaded owl-drag">

  <div class="owl-stage-outer">

    <div class="owl-stage" style="transform: translate3d(-1396px, 0px, 0px); transition: 0s; width: 4886px;">

      <div class="owl-item cloned" style="width: 698px;">
        <div class="item">
          <img src="img/slide2.jpg" alt="GTA V">
        </div>
      </div>
      <div class="owl-item cloned" style="width: 698px;">
        <div class="item">
          <img src="img/slide3.jpg" alt="Mirror Edge">
        </div>
      </div>
      <div class="owl-item active" style="width: 698px;">
        <div class="item">
          <img src="img/slide1.jpg" alt="The Last of us">
        </div>
      </div>
      <div class="owl-item" style="width: 698px;">
        <div class="item">
          <img src="img/slide2.jpg" alt="GTA V">
        </div>
      </div>
      <div class="owl-item" style="width: 698px;">
        <div class="item">
          <img src="img/slide3.jpg" alt="Mirror Edge">
        </div>
      </div>
      <div class="owl-item cloned" style="width: 698px;">
        <div class="item">
          <img src="img/slide1.jpg" alt="The Last of us">
        </div>
      </div>
      <div class="owl-item cloned" style="width: 698px;">
        <div class="item">
          <img src="img/slide2.jpg" alt="GTA V">
        </div>
      </div>
    </div>
  </div>

  <div class="owl-nav">
    <div class="owl-prev">prev</div>
    <div class="owl-next">next</div>
  </div>

  <div class="owl-dots">
    <div class="owl-dot active"><span></span></div>
    <div class="owl-dot"><span></span></div>
    <div class="owl-dot"><span></span></div>
  </div>

</div>

名为“owl.theme.default.min.css”的样式表看起来像包含所有导航样式表但是由于某种原因它没有设置PREV和NEXT按钮的样式？

任何帮助都将不胜感激。

Answer 1

您缺少与您的html声明中的owlcarousel主题相关的类owl-theme：

<div id="owl-single" class="owl-carousel col-xs-12 owl-loaded owl-drag">

应该是：

<div id="owl-single" class="owl-carousel owl-theme col-xs-12 owl-loaded owl-drag">

我尝试将缺少的类直接添加到浏览器检查器中，现在您的页面如下所示：

owl carousel 2 - 主题样式表不起作用

1 个答案: