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

Edit

If it's just a question of waiting until the document is loaded and ready prior to executing your script, then following would work:

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

    $('.slickSlider').show();
});

CSS as follows:

.slickSlider {
    display: none;
}

This assumes you've hidden your .slickSlider via Display: None so it won't be visible to the user until you unhide it via jQuery.