Question

我刚刚下载了Owl Carousel 2来创建带有内嵌背景图像的旋转木马。我仔细阅读了http://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html

上提供的文档

它说：

LazyLoad HTML结构需要class =＆＃34; owl-lazy＆＃34;和数据-SRC =＆＃34; url_to_img＆＃34;或/和data-src-retina =＆＃34; url_to_highres_img＆＃34;。如果你没有在上面的设置上设置，而是在其他DOM元素上设置Owl 将图像加载到css内联背景样式。

这是我的JS初始化：

$('.owl-carousel').owlCarousel({
    lazyLoad: true,
    margin: 20,
    loop: false,
    nav: false,
    items: 3,
});

我的HTML代码：

<div class="owl-lazy" data-src="images/carousel/default/default04.png" data-src-retina="images/carousel/default/default04.png" alt=""></div>

但它没有加载注入div的图像。我在谷歌上搜索过但是一切都在静脉。它现在不工作，可能是更新失败或其他什么。或者可能是我遗失了什么？

Answer 1

作为一种变通方法，您可以使用以下样式将其加载到<img>标记中：

.carousel-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

确保您的猫头鹰项容器具有position: relative;且内容的z-index大于1.

Owl Carousel 2 - 内联背景图片不起作用

1 个答案: