当前位置: 首页 > 知识库问答 >
问题:

owl旋转木马2-主题样式表不工作

马宜民
2023-03-14

我有麻烦让猫头鹰旋转木马主题样式表对我的滑块有任何影响?

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

这里是我的测试地点:示例网站

下面是与owl旋转木马相关的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按钮进行样式化?

如有任何帮助,我们将不胜感激。

共有1个答案

高吉星
2023-03-14

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">

我尝试将丢失的类直接添加到浏览器检查器中,现在您的页面如下所示:

 类似资料:
  • 我需要添加猫头鹰轮播到我的网站。 我遵循了说明,并使用css作为默认主题。 它工作完美。然后突然(没有更改代码)默认主题停止工作(在导航上没有主题)... 我一直试图修复它,但我失去了我的想法...我甚至将更改还原到我确信它工作的地方! 而且这不是关于浏览器的,因为我甚至把它上传到了我的服务器上... 我的代码: 和JS: 这似乎很奇怪,它曾经工作了一段时间,然后就停止了…… 任何帮助都将是感激的

  • 我想要一个包含三个项目的旋转木马,中间的项目以一种背景颜色居中(稍后是一个彩色的背景图像),左+右的项目以不同的颜色(稍后是带有灰度级滤镜的imagebackgrounds)。就像这个OWL1在http://codepen.io/owlfonk/pen/dpjhb上的旋转木马,但我想使用OWL2。 我好像不能挑出当前的项目?!我的旋转木马一直‘画’在中间和右边...我做错什么了?!越来越令人沮丧!

  • 所以我有一个猫头鹰旋转木马滑块,由我使用的主题提供,但它不会停止自动播放悬停。 我尝试将添加到相应元素的中,但没有成功。我不太懂Javascript,所以我真的不知道如何继续。 这是轮播HTML: 滑块工作正常。

  • 我正在玩一个boostrap主题是使用猫头鹰旋转木马。 这是我使用的主题 https://demo.themewagon.com/preview/free-html5-bootstrap-4-travel-agency-website-template-ecoland 正如您在链接中所看到的,猫头鹰旋转木马用于两个地方 用于页面顶部的英雄幻灯片 用于证明。 我想减慢滑梯的速度,让它们在悬停状态下停

  • 我穿着magento 2.2.2和使用Unero主题,我正在开发magento前端。当我在内容部分添加OWL旋转木马滑块时,它是不可见的?

  • 下面是我的WordPress和插件的详细信息。 WordPress详细信息: WordPress版本:4.9.8 WordPress jQuery 1.12.4 插件详细信息: owl-carousel jQuery 1.0.0 插件版本:2.1 使用过的WordPress版本:3.0.1或更高版本 测试范围:4.9.9 [tc-owl-carousel]短代码 谢谢你给我明确的指示。 下面是与o