Graceful slick js loading

[ghost]

When a page with slickjs carousel is loading, the images are stacked together crashing the whole layout. My question is how can I add a gif loader to the slick carousel while the page is loading the necessary elements like js and css.

Foundation did something like this on their version of Orbit slider 2 versions back and I wonder if I could do this on slick.js also.

[simeydotme]

Put a loading image as the background on the slick container, and use CSS to hide all of the container's contents.

.slick-slider {
    background: url(loader.gif);
}
.slick-slider .slick-list { 
    opacity: 0; 
    position: absolute; 
}
.slick-slider.slick-initialized {
    background: none;
}
.slick-slider.slick-initialized .slick-list { 
    opacity: 1;
    position: relative;
    transition: opacity 0.2s ease-in;
}

Something like this will fade the slider in to the container after it has initialized :)

---

Thanks for your contribution, but this is an implementation issue and not a bug/feature request so it should ideally be place in the reddit / stackoverflow as defined in the CONTRIBUTING.markdown file :)

[ghost]

thanks!

[0xadri]

+1 nice inspiration

[aronmoshe-m]

+1 appreciated the idea