How can I preserve space when using Lazy sizes with OwlCarousel

[vishy93]

Hi, I am trying to prevent/reduce jump in layout from Lazy loading images in my slider and main slideshow. But, cannot get it to work well. I have tried the technique stated in the readme, but it doesn't look to be doing the job.

Would anyone know best way to handle this?

https://codepen.io/vishpatel93/pen/gzzpjY

[aFarkas]

@vishy93 I just checked your demo and I can see that you actually do not follow our way to fix this. You have to specify the aspect ratio of your image so that the browser can calculate the width and the height of your images before the image is loaded.

Please carefully read the section in the readme. Please be also aware that there are multiple (CSS) techniques.

I hope this helps.

[vishy93]

@aFarkas Appreciate the response, thank you for taking a look :)

I, in playing about, removed it. I have re-added the said ratio-container css and subsequently the class to the element(s).

I guess I just need to be adding the correct ratio padding.