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

Question

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

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

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

提前致谢。

原文由 jagmitg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑

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

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

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

CSS如下：

 .slickSlider {
    display: none;
}

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

原文由 m.casey 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用@vladkras 的好主意

如果您只使用一张图片并想删除 Layout Shift (CLS)

 .carousel>div:not(:first-child)>img {
    display: none;
}

所以我们只显示第一张图片，然后像轮播一样添加箭头和功能。

原文由 fdrv 发布，翻译遵循 CC BY-SA 4.0 许可协议