Slick.js: Hide slider until images have loaded

javascript, jquery

Solution

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.

Problem

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/

Original source

Related problems