尽管给出了高度，猫头鹰旋转木马仍不显示图像

Question

我的模板中有以下代码 sn-p，其中我使用 owl carousel jquery 库作为滑块。

$('.owl-carousel').owlCarousel({
  items: 1,
  lazyLoad: false,
  loop: true
});

.owl-carousel .owl-lazy {
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<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/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>

<section class="slider-wrapper">
  <div class="owl-carousel owl-theme">
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?nature"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?food"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?travel"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?work"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?pet"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?music"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?friends"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?movie"></div>
  </div>
</section>

我期待创建一个全高和全宽的轮播。虽然我已经给图像容器owl-lazy 指定了高度，但图像是不可见的。上面的代码只有点导航。

Answer 1

如果您想将其实现为背景图像而不是 <img> 标记，这是一个解决方案。

我刚刚设置了lazyLoad: true 并在background-image 容器上定义了一个min-height。

$('.owl-carousel').owlCarousel({
  items: 1,
  lazyLoad: true,
  loop: true
});

.owl-carousel .owl-lazy {
  background-size: cover;
  background-position: center center;
  width: 100%;
  min-height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<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/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>

<section class="slider-wrapper">
  <div class="owl-carousel owl-theme">
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?nature"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?food"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?travel"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?work"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?pet"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?music"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?friends"></div>
    <div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?movie"></div>
  </div>
</section>