0

我刚刚下载了 Owl Carousel 2 来创建一个带有内嵌背景图像的轮播。我彻底阅读了以下网址提供的文档：http ://www.owlcarousel.owlgraphic.com/demos/lazyLoad.html

它说：

LazyLoad HTML 结构需要 class="owl-lazy" 和 data-src="url_to_img" 或/和 data-src-retina="url_to_highres_img"。如果您在其他 DOM 元素上而不是在其他 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 中的图像。我在谷歌上搜索过它，但一切都在脉络中。它现在不起作用，可能是更新失败或其他原因。或者我可能错过了什么？

4

1 回答 1

0

作为一种解决方法，您可以将其加载到<img>具有以下样式的标签中：

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

确保您的 owl item 容器具有position: relative;并且内容z-index大于 1。

于 2015-12-03T02:28:40.990 回答