背景画像を使用するフクロウカルーセルでlazyloaderを使用する方法

Question

通常のimgタグの代わりに背景画像を使用するセミカスタムフクロウカルーセルがあります。スライダにlazyloadingを追加して、スライドがアクティブなときにイメージをロードするようにしたいと思います。フクロウカルーセルは素晴らしい機能を持っていますが、私はそれを働かせることはできません。これはどのように達成できますか？

マイスライダー：

// content articles 
$slider    = "SELECT * FROM `web_content` WHERE catid = 10 AND state = 1 AND featured = 1 ORDER BY ordering"; 
$slidercon   = $conn->query($slider); 
$slidercr   = array(); 
while ($slidercr[] = $slidercon->fetch_array()); 
?> 
<!-- Home - Slider --> 
<!-- ++++++++++++++++++++++++++++++++++++++++ --> 

<section class="service-header home_slide_header"> 
    <? 
    $i = 1; 
    foreach($slidercr as $slider){ 
     $i++; 

     $slider_bgs = $slider['images']; 
     $slider_background = json_decode($slider_bgs); // Split JSON 

     if($slider_background->{'image_fulltext'} != ''){ 
      $bgimg = 'cms/'.$slider_background->{'image_fulltext'}; 
     }else{ 
      $bgimg = 'http://website/nl/cms/images/Projecten/Images/background_placeholder.jpg';  
     } 

     if($slider['id'] != ''){ 
      $backgrounds .= ' 
      <div class="lazy bg-slider sliderclass'.$i.'" style="background: url('.$bgimg.'); 
       background-repeat:no-repeat; 
       -webkit-background-size:cover; 
       -moz-background-size:cover; 
       -o-background-size:cover; 
       background-size:cover; 
       background-position:top;"> 
      </div>'; 
     } 
    } 

    echo $backgrounds; 
    ?> 
    <div class="container"> 
     <div class="row"> 
      <div id="owl-demo" class="owl-carousel owl-theme"> 
      <? 
       $a = 1; 
       foreach($slidercr as $slider1){ 
        $shortstr = substr($slider1['introtext'], 0, 100) . '...'; 
        $a++; 
        if($slider1['id'] != ''){ 
         $slidercontent .= ' 
         <div class="item" data-src=".sliderclass'.$a.'"> 
          <div class="bolletje"></div> 
          <p class="slide_header">'.$slider1['title'].'</p> 
          <div class="info_text"> 
          '.strip_tags($shortstr).' <a class="bekijkprojectindex infolink" href="'.$slider1['alias'].'.html">Bekijk project</a> 
          </div> 
         </div>';  
        } 
       } 
       echo $slidercontent; 
      ?> 
      </div> 
     </div> 
    </div> 
</section> 
?> 

そして、私のカルーセルコード：

$(document).ready(function() { 
var old = ''; 
function setOld(){ 
     setTimeout(function(){ 
      old = $(".center").find('.item').data("src"); 
      $(old).fadeIn('1000'); 
     },50) 
} 

var owl = $("#owl-demo"); 
owl.owlCarousel({ 
     center: true, 
     loop:true, 
     lazyLoad:true, 
     autoplay: true, //Set AutoPlay to 3 seconds 
     responsiveClass:true, 
    responsive:{ 
       0 :{ 
         items:1, 
         loop:true 
       }, 
       900 :{ 
         items:3, 
         loop:true 
       }, 
    }, 
     nav: true, 
     navText: [ '<img src="home_slider/button_left.png" />', '<img src="home_slider/button_right.png" />' ], 
     navSpeed: false, 
     navElement: 'div', 
     navContainer: false, 
     navContainerClass: 'owl-nav', 
     navClass: [ 'owl-prev btn', 'owl-next btn' ], 
     onInitialized: setOld() 
}); 

owl.on('changed.owl.carousel', function(event) { 
    $(old).fadeOut('1050'); 
    setTimeout(function(){ 
     var src = $(".center").find('.item').data("src"); 
     $(src).fadeIn('1000'); 
     old = src; 
    },50) 
}) 

私は、次のpluginを使用したいが、私はまた、フクロウカルーセルが機能hereでビルドを持って参照してください。 どちらを使うのが最適ですか？単にlazyLoad: true,を追加するだけでは機能しません。

Answer 1

私はあなたが達成しようとしているもののようなものに取り組んでいました。これは私がそれを働かせる方法です。フクロウカルーセルから2つのドキュメント

LazyLoad HTML構造は、クラス= "フクロウ怠惰" と、データ・SRC = "url_to_img" または/およびデータ-SRC-網膜= "url_to_highres_img" を必要とします。上の設定をオンにしないで他のDOM要素に設定すると、OwlはイメージをCSSのインライン背景スタイルに読み込みます。

SO私はdiv要素で私のカルーセル要素を作成し、画像のURL にデータsrcを設定するには、データベースから取り出され、それがブラウザで正しく動作して取得する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:false, 
    dots: true, 
    loop : true, 
    animateOut: "fadeOut" 
    } 
); 

参考文献： https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html