Html 如何将此滑块调整到特定的高度/宽度

我在一个响应性很强的图像幻灯片放映中遵循了这个教程，我在进入教程时认为我可以将幻灯片调整到一定的高度和宽度，使其更小，以适应我的想法。可悲的是，我陷入了困境，无法找到解决办法，所以我来到这里，希望能解决这个问题

这是我试图做的事情的图像

这是我的HTML

。幻灯片容器{
位置：相对位置；
宽度：100%；
高度：100vh；
溢出：隐藏；
}
.滑动容器.滑动器{
位置：绝对位置；
排名：0；
左：0；
宽度：500%；
身高：100%；
浮动：左；
动画：动画10秒线性无限；
}
.滑动容器.滑动器.滑动器{
位置：相对位置；
宽度：20%；
身高：100%；
浮动：左；
}
.幻灯片容器.幻灯片.幻灯片.标题{
位置：绝对位置；
底部：60px；
左：60px；
右：60px；
填充：30px；
背景：rgba（0,0,0,0.5）；
框大小：边框框；
}
.幻灯片容器.幻灯片.幻灯片.标题h2{
利润率：0.20px；
填充：0；
颜色：白色；
字体大小：48px；
}
.幻灯片容器.幻灯片.幻灯片.标题p{
保证金：0；
填充：0；
颜色：白色；
字号：18px；
}
.幻灯片容器.滑块.幻灯片.幻灯片1{
背景：url（../images/海洛因2.jpg）；
背景尺寸：封面；
背景位置：中心；
}
.slide容器.slider.slide.slide2{
背景：url（../images/herogmage.jpg）；
背景尺寸：封面；
背景位置：中心；
}
.幻灯片容器.幻灯片.幻灯片.幻灯片3{
背景：url（../images/海洛因2.jpg）；
背景尺寸：封面；
背景位置：中心；
}
.slide容器.slider.slide.slide4{
背景：url（../images/海洛因2.jpg）；
背景尺寸：封面；
背景位置：中心；
}
@关键帧设置动画{
0% 
{
左：0；
}
20% 
{
左：0；
}
25% 
{
左-100%；
}
45% 
{
左-100%；
}
50% 
{
左-200%；
}
70% 
{
左-200%；
}
75% 
{
左-300%；
}
95% 
{
左-300%；
}
100% {
左-400%；
}
}
@介质（最大宽度：768px）{
.幻灯片容器.幻灯片.幻灯片.标题{
底部：20px；
左：20px；
右：20px；
填充：20px；
背景：rgba（0,0,0,0.5）；
框大小：边框框；
}
.幻灯片容器.幻灯片.幻灯片.标题h2{
利润率：0.10px；
字体大小：30px；
}
.幻灯片容器.幻灯片.幻灯片.标题p{
字体大小：16px；
}
}

幻灯片1
试验

幻灯片2
试验

幻灯片3
试验

幻灯片4
试验

您可以使用flex容器，并最终在动画上设置一个延迟，以便它们不会同时启动

可能的例子，如果我理解的话

body{margin:0；}
部分{
显示器：flex；
高度：100vh；
差距：5vw；
填充物：5vw；
框大小：边框框；
}
.滑动容器{
位置：相对位置；
柔性生长：1；
背景：浅灰色；
溢出：隐藏；
}
.滑动容器.滑动器{
位置：绝对位置；
排名：0；
左：0；
宽度：500%；
身高：100%；
浮动：左；
动画：动画10秒线性无限；
}
.滑动容器+.滑动容器.滑块{
动画延迟：-3.3s；
}.滑动容器+.滑动容器+.滑动容器.滑块{
动画延迟：-6.6s；
}
.滑动容器.滑动器.滑动器{
位置：相对位置；
宽度：20%；
身高：100%；
浮动：左；
}
.幻灯片容器.幻灯片.幻灯片.标题{
位置：绝对位置；
底部：6px；
左：6px；
右：6px；
填充：3倍；
背景：rgba（0,0,0,0.5）；
框大小：边框框；
}
.幻灯片容器.幻灯片.幻灯片.标题h2{
利润率：0.20px；
填充：0；
颜色：白色；
字体大小：48px；
}
.幻灯片容器.幻灯片.幻灯片.标题p{
保证金：0；
填充：0；
颜色：白色；
字号：18px；
}
.幻灯片容器.滑块.幻灯片.幻灯片1{
背景：url(https://picsum.photos/id/1012/400/280);
背景尺寸：封面；
背景位置：中心；
}
.slide容器.slider.slide.slide2{
背景：url(https://picsum.photos/id/1014/400/280);
背景尺寸：封面；
背景位置：中心；
}
.幻灯片容器.幻灯片.幻灯片.幻灯片3{
背景：url(https://picsum.photos/id/1016/400/280);
背景尺寸：封面；
背景位置：中心；
}
.slide容器.slider.slide.slide4{
背景：url(https://picsum.photos/id/1018/400/280);
背景尺寸：封面；
背景位置：中心；
}
@关键帧设置动画{
0% {
左：0；
}
20% {
左：0；
}
25% {
左-100%；
}
45% {
左-100%；
}
50% {
左-200%；
}
70% {
左-200%；
}
75% {
左-300%；
}
95% {
左-300%；
}
100% {
左-400%；
}
}
@介质（最大宽度：768px）{
.幻灯片容器.幻灯片.幻灯片.标题{
底部：20px；
左：20px；
右：20px；
填充：20px；
背景：rgba（0,0,0,0.5）；
框大小：边框框；
}
.幻灯片容器.幻灯片.幻灯片.标题h2{
利润率：0.10px；
字体大小：30px；
}
.幻灯片容器.幻灯片.幻灯片.标题p{
字体大小：16px；
}
}

幻灯片1
试验

幻灯片2
试验

幻灯片3
试验

幻灯片4
试验

幻灯片1
Te