How to improve CLS using Owl Carousel sliders?

Question

css

Hello, please tell me, there are several sliders with products on the page, when the page is loaded, when the pictures are loaded, the sliders do not have a height:

Then, when the pictures are loaded, it looks like this:

Accordingly, the layout jumps, and because of this, CLS is bad in Google PageSpeed. Please tell me how to do it so that the layout does not jump, if I set min-height or height, then on small screens the height of the slider is more than necessary.
Thank you in advance for your response.

Answer 1

Try to make the image block padding-bottom: 100%;
Make the image either a picture as an absolute, or through background-image
PS
I do this on my projects. The slider class is the element's parent

.slider {
   display: flex;
   position: relative;
   opacity: 0;
   transition: opacity 1s ease;
}

.owl-loaded {
   opacity: 1;
   display: block;
}