Lazyload cutting off image height when dynamic height is turned on

Question

When I enable Lazyload on my image slideshow with the dynamic height enabled, it cuts off and only shows a fraction of the photo height, I have attached a screenshot, if the initial load you can view the images perfectly, please use the toggle arrows and you will be able to see what I mean.

I have been trying various fixes to no avail and as this was a html theme I purchased, unfortunately, the theme author has also not been able to help me, your help will be much appreciated.

The JS I have in my custom script file is:

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

Answer 1

try to add auto height on function

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

set auto height true

autoHeight: true

Answer 2

You need to set lazyload true in OwlCarousel:

lazyLoad: true

Go to the documentation for more .

Answer 3

Here's my solution of the problem:

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

I also had this problem, "lazyLoad" combined with "autoHeight" cut off some images because the lazy-loaded images' heights weren't taken into account by the owl carousel. For me, this works (modification of the answer from @baduga):

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