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.

Agamogenesis

Have you figured this out? I'm looking for the same solution. I tried @m.casey 's solution but I couldn't get it to work. – Contrabassoon

Below solution is working for me. stackoverflow.com/a/45505798 – Koine

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.

Qatar

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 – Agamogenesis

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

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

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? – Qatar

Answer 2

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

This is the leanest meanest way.

Falkirk

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.

Masteratarms

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

Also looks pretty cool! – Precedency

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

Velleman

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.

Yoho

Answer 6

why don't you use document.ready function:

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

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

short and simple!

Melville