javascript - 尽管给出了高度， Owl Carousel 仍不显示图像

Question

我的模板中有以下代码片段，我使用了 owl carousel jquery 库作为 slider 。

$('.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并定义了 min-height关于background-image容器。

$('.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>