我是Ninja Slider响应式图像滑块脚本（CSS/Javascript）的付费用户，它一直运行得很好。但不幸的是，谷歌现在警告说，它正在导致一个不可接受的大CLS（累积布局偏移）放置在一个响应式布局。我很乐观，有人在Stackoverflow上调整了这段代码-或类似的代码-并可以提供帮助。
这个滑块在我的连接上加载足够快，我甚至很难看到这个转变，但我同意任何转变都可能是麻烦的，我想相应地修复它。本质上，我想修改代码，以便它能在加载图像之前***快速地勾勒出一个与要加载的图像大小相同的动态框***，这样下面的文本就不会“如果用户在滑块中的第一个图像加载之前滚动过去并开始阅读，
在谷歌默认的Optimize Cumulative Layout Shift建议中，该公司建议添加图像的宽度和高度--就像在响应前的日子里一样--并在CSS中的img代码中添加height: auto，如下所示：

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

这适用于直接显示在动态布局中的图像，但不适用于滑块代码中的图像，因为图像不是作为img标签呈现，而是作为无序列表中的列表项内的链接（a href标签）呈现。
尽管如此，我还是尽职尽责地尝试在适用的CSS文件中添加height: auto，我认为它可能是相关的，在#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:noneworks的理解，我认为这只是阻止滑块出现，但我还是尝试将其添加到ninja_slider div以及slider_inner类和ul以及li元素中。它没有工作。我的代码与默认代码类似，但如果实时实现有帮助，它是here。
我忽略了什么？我如何修改滑块代码，以快速显示一个框，该框将很快容纳图像，以便随后放置的文本将保持在原位，而不是在图像加载时被推下？谢谢。