带有背景图像的猫头鹰轮播不起作用

Question

我有以下来自我的应用程序的猫头鹰轮播片段。猫头鹰轮播的 github 页面中的演示使用了<img>标签作为其滑块。以下来自我使用过的网络上的建议background-image：

$('.demo-slider').owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  touchDrag: 1,
  dots: 0,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})

.owl-carousel .item {
  width: 100%;
  height: 512px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("https://source.unsplash.com/1024x512/?coffee");
}

<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>
<div class="owl-carousel owl-theme demo-slider">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

但是上面的代码片段不会生成任何滑块。我在这里错过了什么？

Answer 1

您在 CSS 中错过了类选择器item的点：

.owl-carousel .item {

而且我不确定您可以使用height: auto; 您需要设置特定的高度，例如height: 50px;

Answer 2

如本答案所述，如果您使用 <div> 而不是 <img> ，您将获得背景图像。

此外，您必须提供一些 css 才能使其看起来正确。

这是一个工作示例

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

.owl-lazy {
    height: 200px;
    background-size: cover;
    background-position: center center;
}
.owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {
    max-height: none !important;
}

<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>
<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"/>
<div class="owl-carousel owl-theme">
    <div class="owl-lazy" data-src="https://placehold.it/350x250&text=4"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x250&text=5"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x250&text=6"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x250&text=7"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x250&text=8"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x400&text=9"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x400&text=10"></div>
    <div class="owl-lazy" data-src="https://placehold.it/350x450&text=11"></div>
</div>

Answer 3

这是解决方案!!

当您尝试背景图像时，您必须更新样式中的高度。

例如

.owl-item { ... }

对于窗口高度：-

min-height: 100vh

对于固定高度：-

min-height: 100px

备注：您可以根据需要将" min-height "更改为" height "。