2017-04-06 4 views
1

ダイナミックハイトを有効にした画像スライドショーでLazyloadを有効にすると、画像の高さの一部しか表示されず、あなたは完全に画像を見ることができますロード、トグル矢印を使用してください、あなたは私が何を意味するかを見ることができるでしょう。ダイナミックハイトをオンにしたときに画像の高さがカットオフになる

私は役に立たないさまざまな修正を試みています。これは私が購入したhtmlテーマであるため、残念ながらテーマ作成者も私を助けてくれませんでした。

私は私のカスタムスクリプトファイルを持っているJSがある:

 $(".property-carousel").owlCarousel({ 
     rtl: _rtl, items: 1, lazyLoad : true, 
     responsiveBaseWidth: ".property-slide", dots: false, 
     autoHeight: true, nav: true, navText: ["", ""], loop: true 
     }); 

here is also a screenshot

答えて

0

は機能

owlCarousel({ 
     items: 1, 
     loop: true, 
     autoHeight: true 
    }); 

セットの自動高真

autoHeight: true 
に自動高さを追加しよう
+0

こんにちはアルフィン、私はすでにそれをtrueに設定している、ここで私はcustom.jsに以下の持っているもののコピーは、ある私が中に何かが足りないのですか? 。$( "プロパティ・カルーセル ")owlCarousel({ RTL:_rtl、 項目:1、 lazyLoad:真、 responsiveBaseWidth:" .propertyスライド"、 ドット:偽、 autoHeight:真、 NAV :true、 navText:[""、 "]、 ループ:true }); – Daniel

+0

は、最初の2つの画像にデータsrc-retina = "image path"を与えます –

0
lazyLoad: true 

Go to the documentation for more:あなたはOwlCarouselで真lazyloadを設定する必要があります。

+0

こんにちはNathaniel、それは既に設定されています、遅延ロードが動作していますが、私が持っている問題は画像を有効にしたときに切断されます – Daniel

+0

あなたのスライダーで同じサイズの画像はありません。一度、OwlCarouselはスライダーの大きさを知っており、一貫して動作します。各フクロウの項目に最小の高さを設定してください。メディアのクエリに反応するよう調整できます。 –

+0

私はこの問題を理解しています。あなたが必要とするのは、すべての画像が同じサイズであることです。そして、フクロウカルーセルがそれらの画像について知ることです。 autoHeightがlazyloadで動作しない可能性があります。テストのためにオフにしてみましたか? –

0

はここに問題の私のソリューションです:

gallery.owlCarousel({ 
    margin:5, 
    loop:false, 
    autoHeight:true, 
    items:1, 
    nav: false, 
    dots: false, 
    lazyLoad:true 
}); 
gallery.on('loaded.owl.lazy', function(event) { 
    $(this).find('.owl-item.active img').one('load', function() { 
     gallery.trigger('refresh.owl.carousel'); 
    }); 
}); 
関連する問題