Slick.js: Скрыть слайдер, пока изображения не загрузятся

Решением является чистый CSS.

Во-первых, вы добавляете CSS в свою слайдерную оболочку:

PHP
1
2
3
4
5
6
.your-slider-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

После того, как слайдер инициализирован, slick добавляет класс .slick-initialized к wrapeper. Вы можете использовать это, чтобы добавить:

PHP
1
2
3
4
.your-slider-wapper.slick-initialized {
    visibility: visible;
    opacity: 1;    
}