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

Posted 2023-03-06

【中文标题】Slick Slider (Ken Wheeler) - 隐藏滑块直到加载

【英文标题】：Slick Slider (Ken Wheeler) - Hide Slider until Loaded

【发布时间】：2014-08-30 18:56:01

【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

你明白了吗？我正在寻找相同的解决方案。我尝试了@m.casey 的解决方案，但无法正常工作。

以下解决方案对我有用。 ***.com/a/45505798

【参考方案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();
);

简短而简单！