Shlop
@Shlop
Программист

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

Здравствуйте, подскажите пожалуйста, на странице есть несколько слайдеров с товарами, при загрузке страницы, когда картинки загружаются слайдеры не имеют высоты:
60105c39a9645225844984.png
Потом когда картинки загрузились, выглядит вот так:
60105c8821201115261417.png
Соответственно макет прыгает, и из за этого CLS плохой в Google PageSpeed. Подскажите пожалуйста как сделать что бы не прыгал макет, если я задаю min-height или height, то на небольших экранах высота слайдера больше чем нужно.
Заранее благодарю за ответ.
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
iamd503
@iamd503 Куратор тега CSS
Верстальщик
Попробуйте блоку с картинкой сделать padding-bottom: 100%;
Изображение сделать либо картинкой абсолютом, либо через background-image

PS
Я делаю так на своих проектах. Класс slider - это родитель элементов
.slider {
   display: flex;
   position: relative;
   opacity: 0;
   transition: opacity 1s ease;
}

.owl-loaded {
   opacity: 1;
   display: block;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 февр. 2021, в 23:39
150000 руб./за проект
26 февр. 2021, в 22:16
15000 руб./за проект
26 февр. 2021, в 21:56
20000 руб./за проект