Javascript 如何在猫头鹰轮播中使用背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30665809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use background images with owl carousel
提问by Salman Ahmed
I'd like to use owl carouselwith background images rather than <img>tags, like used in http://driveshift.com/car/c10148. However, every example included in the plugin site uses the imgtags.
我想使用带有背景图像而不是标签的owl carousel<img>，就像在http://driveshift.com/car/c10148 中使用的那样。但是，插件站点中包含的每个示例都使用img标签。
When you inspect the Shiftcarousel, it uses url images as data-src attributes and then owl carousel auto converts them to background images. Any suggestions?
当您检查Shiftcarousel 时，它使用 url 图像作为 data-src 属性，然后 owl carousel 自动将它们转换为背景图像。有什么建议？
回答by paulshen
Check out the example code at https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html
在https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html查看示例代码
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.
LazyLoad HTML 结构需要 class="owl-lazy" 和 data-src="url_to_img" 或/和 data-src-retina="url_to_highres_img"。如果您在其他 DOM 元素上而非 on 上设置上述设置，则 Owl 会将图像加载到 css 内联背景样式中。
Therefore, if you use <div>instead of <img>, you'll get your desired result.
因此，如果您使用<div>而不是<img>，您将得到您想要的结果。
<div class="owl-lazy" data-src="http://placehold.it/350x250&text=3">
Note that you may need to add some CSS to the divfor it to look correctly. Hope that helps!
请注意，您可能需要向 中添加一些 CSS 才能div使其看起来正确。希望有帮助！
回答by Amazing Sey
I was somewhat looking for a similar solution to your question and following the solution proposed by Paulshen I had it working. Basically I created my carousel elements with div and set the data src to the image url pulled from the database and then manipulated it with css and media queries to get it working correctly as he suggested.
我在某种程度上在寻找与您的问题类似的解决方案，并按照 Paulshen 提出的解决方案进行操作。基本上，我用 div 创建了我的轮播元素，并将数据 src 设置为从数据库中提取的图像 url，然后使用 css 和媒体查询对其进行操作，使其按照他的建议正常工作。
Hope this helps, find below:
希望这会有所帮助，请在下面找到：
HTML:
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:
CSS：
.slide-item{ position: relative;
background-repeat: no- repeat;
background-position: top center;background-size: cover;}
Css Media Queries:
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:
JS：
$('.owl-carousel').owlCarousel(
{
lazyLoad:true,
items:1,
autoplay: true,
smartSpeed: 1500,
nav:true,
dots: true,
loop : true,
}
);
回答by Robert F Schweppe Zastrich
Example:
例子：
HTML:
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:
CSS：
.owl-carousel figure {width:100%; height:450px; background-size:cover; background-position:center center; background-repeat:no-repeat;}
JS:
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")+")");
});
}
});
Don't need use lazyLoad functions. Use animations on css to personalize your effects.
不需要使用 lazyLoad 函数。在 css 上使用动画来个性化您的效果。
回答by dragoeco
If you want to display different images (size or aspect ratio) on smaller screens, then you can use padding-top with background-image.
如果你想在较小的屏幕上显示不同的图像（大小或纵横比），那么你可以使用 padding-top 和 background-image。
HTML
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
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');
}
Full code and demo on CODEPEN
CODEPEN上的完整代码和演示
