jquery - Owl Carousel 2 不可见但没有错误

Question

一段时间以来，我一直在尝试让 Owl Carousel 2 在我的开发站点上运行。我之前已经无数次使用过它，所以很明显我在做一些愚蠢的事情。我可以让 v1.x 正常工作。

http://www.creativethings.nz/web/the-house

我没有发现任何错误，我很确定它基本上可以正常工作，只是没有显示出来。可能是 CSS 问题，但我使用的是 Owl Carousel 2 中的常用 CSS。

在头部:

<link rel="stylesheet" href="owl2/owl.carousel.css" />
<link rel="stylesheet" href="owl2/owl.theme.default.min.css"> 

中体:

<div id="gallery" class="owl-carousel owl-theme">
<div><img src="web/images/gallery/sd.jpg"/></div>                                                                                                                                
<div><img src="web/images/gallery/sd.jpg"/></div>                                                                                
</div>

在主体的末尾:

<script type="text/javascript" src="owl2/owl.carousel.min.js"></script>  
<script> 
$(window).on('load',function() { 
$(".owl-carousel").owlCarousel();
});
</script> 

我观察到，通过在 Chrome 中检查并将 .owl-stage-outer 的 CSS 更改为 overflow:visible，它会在幻灯片放映中同时显示(两个)图像。谁能帮忙诊断解决？

Answer 1

您需要在初始化轮播时设置“items”选项。

    $(window).on('load',function() { 
      $('.owl-carousel').owlCarousel({items:1});
    });

工作 JSFiddle Here