Question

我希望owl carousel使用背景图片，而不是像http://driveshift.com/car/c10148中使用的<img>标签。但是，插件网站中包含的每个示例都使用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>代替<img>，您将获得所需的结果。

<div class="owl-lazy" data-src="http://placehold.it/350x250&text=3">

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

Answer 2

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

希望这有帮助，请在下面找到：

HTML：

<div class="owl-carousel owl-theme">
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div>
<div class="slide-item owl-lazy" data-src="https://placehold.it/350x250&text=3"></div>
</div>

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：

<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>

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上使用动画来个性化你的效果。

Answer 4

如果要在较小的屏幕上显示不同的图像（尺寸或宽高比），则可以将padding-top与背景图像一起使用。

HTML

<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>

CSS

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');
}

CODEPEN

上的完整代码和演示

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

4 个答案: