Slick Slider (Ken Wheeler) - Hide Slider until Loaded

Question

I am currently using Slick (Ken Wheeler) slider function. It is currently on being loaded within the footer with only two variables.

        $('.slickSlider').slick({
              dots: true,
              fade: true
        });

I am currently experiencing the ready functionality of jquery where i can see everything breaking until the jquery is loaded. Is there anyway to hide the slider or to fix this issue? where it loads first or it doesnt load anything until all assets are done.

Thanks in advance.

Answer 1

Put a class on your slider element and set it to display:none. In your css, add

.slick-initialized{ 
    display: block 
}

An even better way would be to add opacity:0 to your slider element class, and then add

.slick-initialized{
    opacity:1;
    transition:opacity .3s ease-out;
}

to your css.