Owl 尽管给定了高度，但轮播不显示图像

Question

我的模板中有以下代码片段，我使用了 owl 轮播 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>

Owl 尽管给定了高度，但轮播不显示图像

Owl carousel not showing images despite height given

html

javascript

jquery

owl-carousel

owl-carousel-2