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

Question

我的页面上的 Owl Carousel 出现问题。目前，轮播容器和项目不显示。我用我的网络检查器来检查元素，它似乎display:none在 css 中有一行。但是，当我将其更改为 时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

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

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

Answer 2

你好，我和你在同一个地方。我找啊找，最后来到了这里。

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

然而，我也发现了这个 -链接到 Github 项目

希望这可以帮助。