如何使用猫头鹰旋转木马的背景图像 [英] How to use background images with owl carousel

问题描述

我想将 owl carousel 与背景图片一起使用，而不是< img> 标签，例如 http://driveshift.com/car/c10148。但是，插件网站中包含的每个示例都使用 img 标记。

I'd like to use owl carousel with background images rather than <img> tags, like used in http://driveshift.com/car/c10148. However, every example included in the plugin site uses the img tags.

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

When you inspect the Shift carousel, it uses url images as data-src attributes and then owl carousel auto converts them to background images. Any suggestions?

推荐答案

查看 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内联背景样式。

LazyLoad HTML strucutre requires class="owl-lazy" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img". If you set above settings not on but on other DOM element then Owl will load an image into css inline background style.

因此，如果您使用< div> 而不是< img> ，您将获得所需的结果。

Therefore, if you use <div> instead of <img>, you'll get your desired result.

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

请注意，您可能需要在 div 让它看起来正确。希望有所帮助！

Note that you may need to add some CSS to the div for it to look correctly. Hope that helps!

这篇关于如何使用猫头鹰旋转木马的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！