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.

Solution 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.

Solution 2

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

This is the leanest meanest way.

Solution 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.

Solution 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

View more solutions

Comments

[jagmitg]

Sorry, I think I might have been confusing in the above post, there is no ajax call, the slider breaks until the page is fully loaded and then it fixes itself, I need it so either it hides the slider until the page is loaded or load the slick slider first

[m.casey]

I've edited my response to demonstrate jQuery's document ready functionality.

[jagmitg]

Sorry, that's what it's currently wrapped in, only when dom is ready

[m.casey]

Another edit. The idea being that we hide all instances of the class from the user until the document is ready and the slider function can be invoked on said classes. Does that work better?

[Giannis Dallas]

this is a better approach as toggling opacity avoid the height jumps when the slider displays

[Mike Oberdick]

Also looks pretty cool!