slick slider 로딩과 함께 이미지가 보이기

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.

 

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