Question

以下代码段来自我正在进行的项目，其中我正在尝试实现owl carousel 2。

但是，以下代码给出了一个空白的白页。在添加猫头鹰轮播的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类。根据您的情况，这是横幅类。

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

1 个答案: