Как оптимизировать прыгающий слайдер?

Question

[Алекс]

На сайте стоит слайдер slick. При загрузке страницы соответственно скрипт не успевает инициализировать слайдер и страница дерганная получается то этот блок огромный, то соответственно после инициализации приходит в норму. Есть ли способ убрать это скачкообразное появление?

p.s. пока что в голову приходит или прелоадер на странице (но этого заказчик не торопится делать) или задать высоту на разных разрешениях и скрывать все что за контейнером (но способ так себе).

Comments

[Rustam Bainazarov]

Слайды делайте на абсолютном позиционировании, а высоту контейнера задавайте padding-bottom в процентах, чтобы сохранять пропорции.

[Алекс]

SmthTo, извиняюсь, важный момент как мне кажется состоит в том что слайды это карточки с изображением и текстом. И на разной ширине разное количество карточек

[Rustam Bainazarov]

Алекс, тогда присылайте сразу ссылку, чтобы было всё понятно. Посмотрим, что можно сделать.

[Вадим Ягофаров]

Алекс, А вы можете дать ссылку что бы посмотреть как вы это реализовали?

[Алекс]

Вадим Ягофаров, ниже ответ, но если прям пример нужен вот, собрал на коленке

Answer 1

[Евгений]

я делаю так: родителю слайдов делаю display: flex; слайдам opacity: 0; когда слик загружается и слайдер инициализируется, то он добавляет родителю класс, через него убираю слайдам opacity и вуаля)

PS: и вот можно родителю бэкграундом сделать прелоудер

Comments

[Mary Солнечная]

Здравствуйте! Вы имеете в виду вот так делать?

.мой слайдер {
   display: flex;
}

.мой слайдер .егослайды{
  opacity: 0; 
}

.мой слайдер.slick-initialized ..егослайды{
 opacity: 1; 
}

я пытаюсь там сделать, не выходит пока

[Евгений]

Mary Солнечная, ссылку на песочницу киньте или на сайт

[Mary Солнечная]

Евгений, уже получилось, спасибо!