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

这是解决方案！！！

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

例如

$

对于窗口高度：-

.owl-item { ... }

对于固定高度：-

min-height: 100vh

注释：您可以根据需要将“ min-height: 100px”更改为“ min-height”。

Answer 3

如in this answer所述，如果您使用<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>

猫头鹰旋转木马与背景图片不起作用

3 个答案: