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.

Answer 2

.slider { display: none; }
.slider.slick-initialized { display: block; }

This is the leanest meanest way.

Answer 3

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.

Answer 4

I want to use neither .show() nor .slick-initialized cause it depends on 3d-party script which can be changed. I noticed that my source code looks like:

<div id="main-slider-whatever">
    <div>
        <a href="">
            <img src="1.jgp />
        </a>
    </div>
    <div>
        <a href="">
            <img src="2.jgp />
        </a>
    </div>
    ...
</div>

but slick creates lots of wrappers around images, so I added to my css

#main-slider-whatever>div>a>img {
    display: none;
}

which supports only this sequence and hides images only while they are direct childs of my container without any additional slick classes that are added after initialization

Answer 5

Using nice idea by @vladkras

If you use only one image and wanna to remove Layout Shift (CLS)

.carousel>div:not(:first-child)>img {
    display: none;
}

So we show only first image, then slick just add arrows and functionality like in carousel.

Answer 6

why don't you use document.ready function:

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

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

short and simple!