如何使用 Slider (CSS/Javascript) 减少 CLS累积布局偏移？

如何解决如何使用 Slider (CSS/Javascript) 减少 CLS累积布局偏移？

我是 Ninja Slider 响应式图片滑块脚本 (CSS/Javascript) 的付费用户，它一直运行良好。不幸的是，谷歌现在警告说，它导致在响应式布局中放置了一个不可接受的大 CLS（累积布局偏移）。我很乐观，Stackoverflow 上的某个人已经调整了这段代码——或类似的代码——并且可以提供帮助。

这个滑块在我的连接上加载得足够快，我什至很难看到这种转变，但我同意任何转变都可能很麻烦，我想相应地修复它。本质上，我想修改代码，以便它快速勾勒出一个动态框，该框将在加载图像之前加载图像的大小，因此以下文本不会如果用户在滑块中的第一张图片加载之前滚动过去并开始阅读，则向下移动。

在 Google 的默认 Optimize Cumulative Layout Shift 建议中，该公司建议添加图像的宽度和高度 - 就像在响应前的日子一样 - 并将 height: auto 添加到 CSS 中的 img 代码像这样：

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

这适用于直接在动态布局中显示的图像，但不适用于滑块代码中的图像，因为图像不是作为 img 标签显示的，而是作为链接（a href 标签）显示的在无序列表中的列表项中。

我仍然尽职尽责地将 height: auto 添加到我认为可能相关的适用 CSS 文件中，在 #ninja_slider div 和 slider-inner 类中。这没有破坏任何东西，但也没有解决问题。默认 CSS 代码为 here。

根据要求，我相信这是相关代码，但我可能错了，查看完整代码可能会有用：

#ninja-slider {
    width:100%;
    background:#191919;
    padding: 30px 0;

    margin:0 auto;
    overflow:hidden;
    Box-sizing:border-Box;

}

#ninja-slider .slider-inner {
    max-width:600px;
    margin:0 auto;/*center-aligned */
    font-size:0px;
    position:relative;
    Box-sizing:border-Box;

}

StackOverflow 上的

This post 是我能够挖掘的唯一相关内容，答案表明使用 CSS 类在“块”上添加 display: none 可以解决该问题。

根据我对 display:none works 的理解，我认为这只会阻止滑块出现，但我仍然尝试将它添加到 ninja_slider div 以及 { {1}} 类和 slider_inner 和 ul 元素。它不起作用。我的代码与默认代码类似，但如果实时实现有帮助，则为 here。

我忽略了什么？如何更改滑块代码以快速显示一个将很快容纳图像的框，以便随后放置的文本将保留在原位并且在图像加载时不会被按下？谢谢。