Slick Slider(Ken Wheeler) - 隐藏滑块直到装载

Question

我目前正在使用Slick(Ken Wheeler)滑块功能.它目前正在页脚中加载,只有两个变量.

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

我目前正在体验jquery的现成功能,我可以在加载jquery之前看到所有内容都崩溃.反正有没有隐藏滑块或解决这个问题？它首先加载的地方,或者在所有资产完成之前不加载任何东西.

提前致谢.

Answer 1

编辑

如果只是在执行脚本之前等待文档加载并准备就绪的问题,那么下面的工作将会起作用:

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

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

CSS如下:

.slickSlider {
    display: none;
}

这假设您已经通过Display隐藏了.slickSlider:None,因此在您通过jQuery取消隐藏之前,用户将无法看到它.

Answer 2

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

这是最卑鄙的方式.

Answer 3

在滑块元素上放置一个类并将其设置为 display:none。在你的CSS中，添加

.slick-initialized{ 
    display: block 
}

更好的方法是将 opacity:0 添加到滑块元素类中，然后添加

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

到你的CSS。