猫头鹰轮播 css 设置为显示：页面加载时无答案

【问题标题】：Owl Carousel css set to display:none when page has loaded猫头鹰轮播 css 设置为显示：页面加载时无
【发布时间】：2015-11-16 11:20:02
【问题描述】：

我的页面上的 Owl Carousel 出现问题。目前，轮播容器和项目不显示。我使用我的网络检查器检查元素，它似乎在 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（加载到页脚时也不起作用）。

这可能不起作用有什么明显的原因吗？

【问题讨论】：

出现任何控制台错误、冲突等？我经常使用 Owl Carousel 并且几乎总是在某些时候遇到问题......
你能做一个jsfiddle吗？元素可能有一个全局 css 属性，但可能脚本被设置为一次只显示一个项目（是 DOM 中正在更改的样式属性）。
@samuidavid 是的，实际上你是对的，我收到一个关于 fancybox 脚本的错误 - 刚刚删除它并且它可以工作 - 谢谢你的手！！
很好，可能是 jQuery 冲突导致 Owl 无法运行？

标签： jquery css owl-carousel

【解决方案1】：

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

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

【讨论】：

更具体地说，在页脚某处调用 owl.carousel.min.js 文件后进行调用

【解决方案2】：

在 1.3.3 版本中，我遇到了同样的问题。我没有看到轮播，因为项目在 CSS 中有“显示：无”。当我将“display：none”更改为“display：block”时，我可以看到这些项目，但作为一列。

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

【讨论】：

【解决方案3】：

!!!注意!!!

如果你有这个问题，你应该做的就是在你的脚本之前替换 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>

【讨论】：

【解决方案4】：

嗨，我和你在同一个地方。我找了又找，最后到了这里。

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

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

希望这会有所帮助。

【讨论】：

我遇到了同样的“不工作”问题，并通过放弃 2.2 版的轮播并恢复到 1.3 版来解决它。虽然这不是一个好的解决方案，但当前版本应该是固定的。我不想为了让插件正常工作而胡闹。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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


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

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

【讨论】：

【解决方案7】：

伙计们，我找到了解决方案。您的 jquery 文件需要位于您的 owl javascript 文件之上。就这么简单。

只要确保你的 jquery 高于一切，因为它需要首先执行。

【讨论】：

当你说你找到了解决方案时，你能解释一下你怎么知道那是解决方案吗？
这里的其他答案似乎已经涵盖了这一点
我制作了一个关于它的视频 > youtube.com/watch?v=Or4pKNrk37s