Owl carousel not showing images despite height given

Question

I have the following code snippet from my template whre I've used owl carousel jquery library for 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>

I'm looking forward to create a full height and width carousel. Although I have given the height to the image container owl-lazy the images are not visible. The above code only dot navigation.

Answer 1

Here's a solution if you want to implement it as a background-image instead of a <img> Tag.

I Just set lazyLoad: true and defined a min-height on the background-image Container.

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