Question

我的页面上有我的猫头鹰旋转木马的问题。目前，轮播容器和物品不显示。我使用我的Web检查器检查元素，看起来它在css中有一行display:none。但是，当我将其更改为display:block时，项目会在另一个下方显示，而不是水平显示。

我的旋转木马脚本如下：

jQuery(function($){
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        dots:true,
        autoplay:true,
        autoplayHoverPause:true,
        items:4,
        responsive:{
          0:{
            items:1
          },
            480:{
        items:2
          },
            768 :{
        items:4  
          }
        }
    })
});

我的HTML标记如下：

<div class="row owl-carousel container">
    <div id="layers-widget-carousel-5-931" class="item layers-widget-carousel-931">
    ...
    </div>
    <div id="layers-widget-carousel-5-715" class="item layers-widget-carousel-715">
    ...
    </div>
    <div id="layers-widget-carousel-5-95" class="item layers-widget-carousel-95">
    ...
    </div>

我有脚本中加载的脚本owl.carousel.min.js，owl.carousel.css和owl.theme.default.css（在页脚中加载时无效）。

有没有明显的理由说明为什么这可能不起作用？

Answer 1

对于1.3.3版本，我遇到了同样的问题。我没有看到旋转木马，因为CSS中的项目有“display：none”。当我将“display：none”更改为“display：block”时，我可以看到这些项目，但是作为一列。

我发现，owl.carousel.js的链接位于标题中的错误位置。我把它移到页脚，它解决了问题。

Answer 2

嗨，我和你在同一个地方。我搜索并搜索到了最后。

出于好奇，我将JS和CSS更新到了最新版本。这对我有用。

但是，我也发现了这个 - Link to Github item

希望这有帮助。

Answer 3

仅为容器显示添加：无和carusel添加显示：阻止自己

Answer 4

!!!注意!!!

如果您有此问题，您要解决的所有事情就是在脚本之前替换owl库。示例：

<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<!-- here goes your scripts -->
<script src="js/main.js"></script>
</footer>

Answer 5

我遇到了这个问题，这是因为我忘了在结尾添加js调用。

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

别像我。

Answer 6

我找到了解决办法。您的jquery文件必须位于您的owl javascript文件之上。这么简单。

只要确保您的jquery高于一切，就必须首先执行它。

Answer 7

如果您在函数中调用 owlCarousel()，请先确保文档已准备就绪。 .js 文件示例：


(function ($) {
  function initOwlCarousel() {
    $('.owl-carousel').owlCarousel();
  }

  $(document).ready(function () {
    initOwlCarousel();
  });
})(jQuery);

Owl Carousel css设置为在页面加载时显示：none

7 个答案: