我的模板中有以下代码片段,我使用了 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
的高度,但图像不可见。上面的代码只是点导航。
最佳答案
如果您想将其实现为背景图像而不是 <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>
关于javascript - 尽管给出了高度, Owl Carousel 仍不显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57941779/