Slick.js: Hide slider until images have loaded

Question

Using Slick.js, how does one hide the slide until the images have loaded or at least the first image has loaded? I tried using init but couldn't get it to work. Nothing is outputted to the console, either.

var $slider = $('.slider').slick({
    fade: true,
    focusOnSelect: true,
    lazyLoad: 'ondemand',
    speed: 1000
});

$('.slider').on('init', function(slick) {
    console.log('fired!');
    $('.slider').fadeIn(3000);
});

I also tried window load, but that didn't fix it either.

$(window).load(function() {
    $('.slider').fadeIn(3000);
});

http://jsfiddle.net/q5r9ertw/

Answer 1

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.

Answer 2

Make sure to bind the init event before initializing slick.

Example: http://jsfiddle.net/b5d5mL7p/

var $slider = $('.slider')
        .on('init', function(slick) {
            console.log('fired!');
            $('.slider').fadeIn(3000);
        })
        .slick({
            fade: true,
            focusOnSelect: true,
            lazyLoad: 'ondemand',
            speed: 1000
        });

Answer 3

Slick adds the class 'slick-initialized' to the wrapper that you call 'slick' on.

Set all slides except the first to display:none on initial load and you get the slider at its correct height, with no jumping on slick load. When slick is initialized, you want them all back to display: block.

CSS

.slide img {
  height: 600px;
  width: auto;
}
.slide:not(:first-of-type) {
  display: none;
}
.slider.slick-initialized .slide:not(:first-of-type) {
  display:block;
} 

Answer 4

Try below code.

#your-slider .slide:nth-child(n+2) {
  display: none;
}
#your-slider.slick-initialized .slide {
  display: block;
}

Note: You need to add slide class to each slide in your slider

Codepen demo: https://codepen.io/rohitutekar/pen/GRKPpOE