JSG JSG - 7 months ago 143
Javascript Question

Slick Slider (Ken Wheeler) - Hide Slider until Loaded

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

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.

Comments