Javascript 如何在owl转盘中使用背景图像

我想与背景图像一起使用，而不是

查看下面的示例代码

LazyLoad HTML结构需要class=“owl lazy”和data src=“url\u to\u img”或/和data src retina=“url\u to\u highres\u img”。若您不在其他DOM元素上设置上述设置，则Owl将把图像加载到css内联背景样式中

因此，如果您使用
而不是


请注意，您可能需要将一些CSS添加到
div
，以使其看起来正确。希望有帮助
 我在为你的问题寻找一个类似的解决方案，按照Paulshen提出的解决方案，我让它起作用了。基本上，我用div创建了carousel元素，并将数据src设置为图像url
从数据库中提取，然后使用css和媒体查询对其进行操作，以使其按照他的建议正常工作

希望这有帮助，请查找以下内容：

HTML:

Css媒体查询：

.slide-item{ position: relative;
background-repeat: no-   repeat;
background-position: top center;background-size: cover;}

JS:

例如：

HTML:

JS:

不需要使用lazyLoad函数。使用css上的动画来个性化您的效果。
如果您想在较小的屏幕上显示不同的图像（大小或纵横比），则可以使用背景图像填充顶部

HTML

$('.owl-carousel').owlCarousel({
    onTranslated: function(me){
        $(me.target).find(".owl-item.active [data-src]:not(.loaded)").each(function(i,v){
            $(v).addClass("loaded").css("background-image", "url("+$(v).attr("data-src")+")");
        });
    }
});

关于
的完整代码和演示谢谢Robert，您的示例非常鼓舞人心。反馈：在示例中使用javascript时，无论项目参数值如何，始终会显示3张幻灯片。为了避免最初看到加载的gif:placehold.it/350x250&text=1）“>我可以通过将背景移动到css.owl stage div{background image:url（load.gif）；background position:center center！important；background repeat:no repeat！important；}理想情况是在显示加载图标之前等待一秒钟。
.slide-item{ position: relative;
background-repeat: no-   repeat;
background-position: top center;background-size: cover;}

@media screen and (max-width: 39.9375em) {
.slide-item{min-height: 280px;background-position: center;    background-size: cover;} }
@media screen and (min-width: 40em) {
.slide-item{ height: 360px; min-height: 360px;} }
@media screen and (min-width: 64em) {
.slide-item{ height: 600px; min-height: 600px;}}

$('.owl-carousel').owlCarousel(
{
    lazyLoad:true,
    items:1,
    autoplay: true,
    smartSpeed: 1500,
    nav:true,
    dots: true,
    loop : true,
  }
);

<div class="owl-carousel">
    <figure style="background-image:url(loading.gif)" data-src="image-real.jpg"></figure>
    <figure style="background-image:url(loading.gif)" data-src="image-real-2.jpg"></figure>
    <figure style="background-image:url(loading.gif)" data-src="image-real-3.jpg"></figure>
    <figure style="background-image:url(loading.gif)" data-src="image-real-4.jpg"></figure>
</div>

.owl-carousel figure {width:100%; height:450px; background-size:cover; background-position:center center; background-repeat:no-repeat;}

$('.owl-carousel').owlCarousel({
    onTranslated: function(me){
        $(me.target).find(".owl-item.active [data-src]:not(.loaded)").each(function(i,v){
            $(v).addClass("loaded").css("background-image", "url("+$(v).attr("data-src")+")");
        });
    }
});

<section>
  <div class="owl-carousel owl-theme">
    <div class="slider"><a class="one" href="#"></a></div>   
    <div class="slider"><a class="two" href="#"></a></div>
    <div class="slider"><a class="three" href="#"></a></div>
  </div>
</section>

section {
  max-width: 1200px;
  margin: 0 auto;
}
.slider a {
  background-position: center;
  background-size: cover;  
  display: block;
  width: 100%;
  height: auto;
  padding-top: 18.33%; /** HEIGHT : WIDTH x 100 **/
}
.one {
  background-image: url('https://picsum.photos/1200/220?random=1');
}
.two {
  background-image: url('https://picsum.photos/1200/220?random=2');
}
.three {
  background-image: url('https://picsum.photos/1200/220?random=3');
}