时间戳

首页 > 解决方案 > 猫头鹰旋转木马全高给出空白页

javascript - 猫头鹰旋转木马全高给出空白页

问题描述

以下片段来自我正在进行的项目，我正在尝试实现 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>

标签： javascriptjquerycssowl-carouselowl-carousel-2

解决方案

owl-carousel在包含 div 上添加类。在您的情况下，这是横幅课程。

推荐阅读