当动态高度打开时，Lazyload会切断图像高度

Question

当我在启用动态高度的图像幻灯片上启用Lazyload时，它会切断并仅显示照片高度的一小部分，我附上了截图，如果初始加载可以完美查看图像，请使用切换箭头，你就能看到我的意思。

我一直在尝试各种修复无效，因为这是我购买的html主题，不幸的是，主题作者也无法帮助我，您的帮助将不胜感激。

我在自定义脚本文件中的JS是：

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

Answer 1

尝试在功能上添加自动高度

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

设置自动高度为真

autoHeight: true

Answer 2

您需要在OwlCarousel中设置lazyload true：

lazyLoad: true

Go to the documentation for more。

Answer 3

这是我对问题的解决方案：

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');
    });
});

Answer 4

我也遇到了这个问题，“ lazyLoad”与“ autoHeight”结合使用会切断某些图像，因为猫头鹰传送带并未考虑延迟加载图像的高度。对我来说，这有效（@baduga答案的修改）：

var myCarousel = $(".property-carousel").owlCarousel({ 
    lazyLoad : true, 
    autoHeight: true
});
myCarousel.on('loaded.owl.lazy', function(event) {
    myCarousel.trigger('refresh.owl.carousel');
});