Slick Slider (Ken Wheeler) - 隐藏滑块直到加载答案

【问题标题】：Slick Slider (Ken Wheeler) - Hide Slider until LoadedSlick Slider (Ken Wheeler) - 隐藏滑块直到加载
【发布时间】：2014-08-30 18:56:01
【问题描述】：

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

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

我目前正在体验 jquery 的现成功能，在加载 jquery 之前，我可以看到一切都在中断。无论如何要隐藏滑块或解决此问题？它首先加载或在所有资产完成之前不加载任何内容。

提前致谢。

【问题讨论】：

你明白了吗？我正在寻找相同的解决方案。我尝试了@m.casey 的解决方案，但无法正常工作。
以下解决方案对我有用。 stackoverflow.com/a/45505798

标签： jquery css jquery-plugins slider slick.js

【解决方案1】：

编辑

如果只是在执行脚本之前等待文档加载并准备好，那么以下将起作用：

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

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

CSS如下：

.slickSlider {
    display: none;
}

这假设你已经通过 Display: None 隐藏了你的 .slickSlider，所以在你通过 jQuery 取消隐藏之前它对用户不可见。

【讨论】：

对不起，我想我可能在上面的帖子中感到困惑，没有 ajax 调用，滑块在页面完全加载之前会中断，然后它会自行修复，我需要它所以要么隐藏滑块，直到页面加载或先加载光滑的滑块
我已经编辑了我的回复来演示 jQuery 的文档就绪功能。
对不起，这是它目前的包装，只有当 dom 准备好时
另一个编辑。这个想法是我们对用户隐藏类的所有实例，直到文档准备好并且可以在所述类上调用滑块函数。这样效果更好吗？

【解决方案2】：

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

这是最精简最卑鄙的方式。

【讨论】：

【解决方案3】：

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

.slick-initialized{ 
    display: block 
}

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

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

到你的CSS。

【讨论】：

这是一种更好的方法，因为切换不透明度可以避免滑块显示时的高度跳跃
看起来也很酷！

【解决方案4】：

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

<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;
}

它仅支持此序列，并且仅在它们是我的容器的直接子级时隐藏图像，而无需在初始化后添加任何额外的 slick 类

【讨论】：

【解决方案5】：

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

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

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

简短而简单！

【讨论】：