slick슬라이더 로드전 이미지 보여지는 이슈 css해결법

I know it's an old question, but this worked for me in a similar situation, when the problem was that all slides were displayed at once and this looked horrible and jumpy.

The solving is pure CSS.

First, you add CSS to your slick slider wrapper:

.your-slider-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}
After slider is initialized, the slick adds .slick-initialized class to the wrapeper. You can use this to add:

.your-slider-wapper.slick-initialized {
    visibility: visible;
    opacity: 1;    
}
Hope this helps someone who stumbles upon this question as I did.

https://stackoverflow.com/questions/28357617/slick-js-hide-slider-until-images-have-loaded