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 
}

更好的方法是在您的滑块元素类中添加不透明度：0，然后添加

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

到你的CSS。

Answer 4

我既不使用.show()也不使用.slick-initialized，因为它取决于可以更改的3d-party脚本。我注意到我的源代码如下：

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

但是光滑在图像周围创建了很多包装器，所以我添加到了我的css

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

仅支持此序列并且只在它们是我的容器的直接子节点时隐藏图像，而没有在初始化之后添加的任何额外的光滑类

Answer 5

为什么不使用document.ready函数：

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

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

简短而简单！

Slick Slider（Ken Wheeler） - 隐藏滑块直到装载

5 个答案: