如何使用猫头鹰旋转木马的背景图像

我想使用背景图像而不是标签的猫头鹰旋转木马 ，就像在http://driveshift.com/car/c10148中使用的那样。 但是，插件站点中包含的每个示例都使用img标记。

当您检查Shift轮播时，它使用url图像作为data-src属性，然后owl轮播自动将它们转换为背景图像。 有什么建议？

Answer 1

查看https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html上的示例代码

LazyLoad HTML结构要求class =“owl-lazy”和data-src =“url_to_img”或/和data-src-retina =“url_to_highres_img”。 如果您未设置上述设置但在其他DOM元素上设置，则Owl会将图像加载到css内联背景样式中。

因此，如果您使用

而不是 ，您将获得所需的结果。

请注意，您可能需要向div添加一些CSS才能正确显示。 希望有所帮助！

Answer 2

我在某种程度上寻找一个类似于你问题的解决方案，并按照Paulshen提出的解决方案进行操作。 基本上我用div创建了我的轮播元素，并将数据src设置为从数据库中提取的图像URL，然后使用css和媒体查询对其进行操作，以使其正常工作。

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

HTML：

CSS：

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

Css媒体查询：

 @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;}} 

JS：

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

Answer 3

例：

HTML：

CSS：

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

JS：

 $('.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")+")"); }); } }); 

不需要使用lazyLoad函数。 在css上使用动画来个性化您的效果。