如何使用貓頭鷹傳送帶的背景圖像

Question

我想使用owl carousel與背景圖像，而不是<img>標籤，就像使用http://driveshift.com/car/c10148。但是，插件網站中包含的每個示例都使用img標籤。

當您檢查Shift傳送帶時，它將url圖像用作data-src屬性，然後貓頭鷹傳送帶自動將它們轉換爲背景圖像。有什麼建議麼？

Answer 1

退房在https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html

LazyLoad HTML strucutre的示例代碼需要類= 「OWL-懶惰」 和數據SRC = 「url_to_img」 或/和數據-SRC-視網膜= 「url_to_highres_img」。如果您將上述設置設置爲不在其他DOM元素上，那麼Owl會將圖像加載到css內聯背景樣式中。

因此，如果您使用<div>而不是<img>，則會得到您想要的結果。

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

請注意，你可能需要一些CSS添加到div它正確地看。希望有所幫助！

Answer 2

我有點尋找一個類似的解決方案來解決你的問題，並遵循Paulshen提出的解決方案。基本上，我用div創建了我的轉盤元素，並將數據src設置爲從數據庫中提取的圖像url ，然後使用css和媒體查詢對其進行操作，以使其正常工作，正如他所建議的。

希望這有助於找到如下：

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：

.slide-item{ position: relative; 
background-repeat: no- repeat; 
background-position: top center;background-size: cover;} 

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：

$('.owl-carousel').owlCarousel(
{ 
    lazyLoad:true, 
    items:1, 
    autoplay: true, 
    smartSpeed: 1500, 
    nav:true, 
    dots: true, 
    loop : true, 
    } 
); 

Answer 3

例子：

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：

.owl-carousel figure {width:100%; height:450px; background-size:cover; background-position:center center; background-repeat:no-repeat;} 

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")+")"); 
     }); 
    } 
}); 

不需要使用lazyLoad功能。在css上使用動畫來個性化你的效果。