我想使用带背景图像而不是标签的猫头鹰旋转木马<img>,就像在http://driveshift.com/car/c10148中使用的那样.但是,插件站点中包含的每个示例都使用img标记.
当您检查Shift轮播时,它使用url图像作为data-src属性,然后owl carousel自动将它们转换为背景图像.有什么建议？
查看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">
请注意,您可能需要添加一些CSS才能div正确显示.希望有所帮助!