Slick shows all the slides for a split second when page loads

[Maryanos]

Hi, I have implemented slick on my website but there is an unexpected behaviour. So, when the page is loading all 3 slides are visible for a split second then slick is working as it should, but every page refresh, I see all 3 slides for a moment.

Here is a simple example, all setup is correct but please check this. http://jsfiddle.net/q4bfgcax/

Click RUN a few times so you will see what I mean.

Hope there is enough details, and hope someone will help me on that. Thanks so much!

[andrewcbi]

This is one way to beat the CLS:

<div id="slider" style="display:none !important">
   <!-- Slick Slides -->
</div>

var slicksslideshow = jQuery('#slider');
jQuery(document).ready(function(){
setTimeout(function(){
  slickslideshow.fadeIn(400);
  slickslideshow.slick({
     // slick settings go here.
}, 600);
});

[Tan-Sc]

Is there any other way to solve this issue without setTimeout? Thanks!

[andrewcbi]

I don't know of a better way than this. You can play with the setTimeout value to suit your application though, it will depend what the size of the content is and how quick the page is ready to display.