javascript - 猫头鹰旋转木马与背景图片不起作用

我的应用程式中有以下猫头鹰轮播片段。猫头鹰传送带的github页面上的演示对其滑块使用了<img>标签。根据网上的建议，我使用了background-image：

$('.demo-slider').owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  touchDrag: 1,
  dots: 0,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})

.owl-carousel .item {
  width: 100%;
  height: 512px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("https://source.unsplash.com/1024x512/?coffee");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme demo-slider">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

但是上面的代码片段不会产生任何滑块。我在这里错过了什么？

最佳答案

您在CSS中错过了类选择器item的点：

.owl-carousel .item {

我不确定您可以使用height: auto;
您需要设置特定的高度，例如height: 50px;