Как улучшить CLS используя слайдеры Owl Carousel?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста, на странице есть несколько слайдеров с товарами, при загрузке страницы, когда картинки загружаются слайдеры не имеют высоты:

Потом когда картинки загрузились, выглядит вот так:

Соответственно макет прыгает, и из за этого CLS плохой в Google PageSpeed. Подскажите пожалуйста как сделать что бы не прыгал макет, если я задаю min-height или height, то на небольших экранах высота слайдера больше чем нужно.
Заранее благодарю за ответ.

Answer 1

[Евгений]

Попробуйте блоку с картинкой сделать padding-bottom: 100%;
Изображение сделать либо картинкой абсолютом, либо через background-image

PS
Я делаю так на своих проектах. Класс slider - это родитель элементов

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

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

Comments

[Сергей Хлопов]

Благодарю вас за ответ. Попробую чуть позже