Slick Slider (Ken Wheeler) - Slider to download

Question

I am currently using the Slick slider (Ken Wheeler). Currently, it is loaded in the footer with only two variables.

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

Currently I have jquery functions ready where I see everything that breaks before jquery loads. Anyway, to hide the slider or fix this problem? where it loads first, or it doesn’t load anything until all assets are completed.

Thanks in advance.

Answer 1

Edit

If this is only a matter of waiting for the document to load and its readiness before executing your script, then the following will work:

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

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

CSS is as follows:

.slickSlider {
    display: none;
}

, .slickSlider Display: None, , jQuery.

Answer 2

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

.

Answer 3

: none. css

.slick-initialized{ 
    display: block 
}

- : 0 ,

.slick-initialized{
    opacity:1;
    transition:opacity .3s ease-out;
}

css.

Answer 4

.show(), .slick-initialized, 3d-party script, . , :

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

slick , css

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

which only supports this sequence and hides images only when they are direct children of my container, without any additional classes that are added after initialization

Answer 5

why you are not using the document.ready function:

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

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

short and simple!