Как сделать чтобы при загрузке слайдер не разлетался?

Question

[edu30151]

Часто бывает что необходимо сделать слайдер на сайте. Понятно что беру готовые решения: owl-carusel, bx-slider, slick-slider. В установке, допиле проблем нет. Слайдер часто идет первым экраном и поэтому при загрузке, без прелоадера , картинки разлетаются потом собираются. Как убрать этот разлет, не используя прелоадер? overflow: hidden; не помогает. Выносить стили слайдера наверх в style? Или какие еще пути решения? Все сжимаю объединяю в один сss c помощью gulp. Может подскажите знатоки что почитать на эту
тематику? Спасибо.

Comments

[glenean]

Подскажите, пожалуйста, что значит "картинки разлетаются"?

[edu30151]

glenean: При загрузке слайдера все картинки слайдера сначала подгружаются одна под одной в колонку, а потом становятся как надо. У вас слайдер из 5 картинок. Вы видите одну нажимаете стрелку и их листаете. А при загрузке, где то 1 сек Вы видите все 5 одна под другой.

Answer 1

[glenean]

Попробуйте написать:

opacity: 0;

для картинок, по умолчанию, а после загрузки:

opacity: 1;

Comments

[edu30151]

Это получается при помощи js только можно сделать?

[glenean]

edu30151: да, при помощи js, у Вас же слайдеры, у некоторых из них есть coolback вроде onContentLoad, вот туда и поместите востановление opacity: "opacity: 1;". Например у owl-carusel есть coolback "afterLazyLoad".

[edu30151]

Спасибо за помощь дальше сам разберусь!

[glenean]

edu30151: Если поможет, отметьте, пожалуйста, как правильный ответ

[glenean]

edu30151: Еще можете попробовать: display:none; - display:inline; или display:block;

[glenean]

edu30151: на самом деле нужно использовать visibility hidden; visibility visible; и можно не для каждой картинки, а для холдера, который их содержит.

Answer 2

[Андрей]

Только что решал такое с помощью класса (у меня там не только картинки были)

.topDiv {
position: absolute;
top: -20000px;
}

после загрузки убирал этот класс