javascript - Owl Carousel 全高给出空白页

Question

以下片段来 self 正在进行的元素，我正在尝试实现 owl carousel 2。

但是，下面的代码给出了一个空白的白页。这是在我添加 Owl Carousel 的js初始化代码后出现的。

在我添加脚本之前，文本和图像都在正确的位置。此外，控制台不显示任何错误。我不确定我在这里错过了什么？请建议。下面是我的代码:

$('.banner').owlCarousel({
  loop: true,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1,
      nav: false,
      loop: true,
    },
    600: {
      items: 1,
      nav: false,
      loop: true,
    },
    1000: {
      items: 1,
      nav: false,
      loop: true,
    }
  }
})

.banner-item {
  position: relative;
  height: 100vh;
  background-position: center;
  background-size: cover;
}

.banner-data {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.banner-data h1 {
  color: #fff;
}

.banner-data p {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" rel="stylesheet" />


<div class="banner">

  <div class="banner-item" style="background-image:url(https://source.unsplash.com/1024x768/?beer)">
    <div class="banner-data">
      <h1 class="uk-h1">Heading</h1>
      <p class="uk-text-lead">Subheading</p>
    </div>
  </div>

  <div class="banner-item" style="background-image:url(https://source.unsplash.com/1024x768/?food)">
    <div class="banner-data">
      <h1 class="uk-h1">Heading</h1>
      <p class="uk-text-lead">Subheading</p>
    </div>
  </div>

  <div class="banner-item" style="background-image:url(https://source.unsplash.com/1024x768/?dog)">
    <div class="banner-data">
      <h1 class="uk-h1">Heading</h1>
      <p class="uk-text-lead">Subheading</p>
    </div>
  </div>


</div>

Answer 1

在包含的 div 上添加 owl-carousel 类。在您的案例中，它是banner类。