php - Html - 更改 slider 的宽度和高度

Question

出于教育目的，我正在使用 PHP 和 HTML 创建一个动态网站。

我一直在尝试制作像本视频中那样的“幻灯片”。 https://www.youtube.com/watch?v=L-vBR3vzOe8

但是我一直难以设置所需的宽度和高度(它太小了)。在过去的一个小时里，我一直在研究代码，但我无法弄清楚。

有好心人给我指出正确的方向吗？

我的代码看起来像这样:

CSS 代码:

@keyframes slider {

0% {
    left: 0;
}

20% {
    left: 0;
}

25% {
    left: -100%;
}

45% {
    left: -100%;

}

50% {
    left: -200%;

}

70% {
    left: -200%;
}

75% {
    left: -300%;
}

95% {
    left: -300%;
}

100% {
    left: -400%;

}

}

#slider {
    overflow: hidden;

}

#slider figure img {
    width:20%;
    float: left;

}

#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite; 

}

这是我的 HTML 代码:

  <div id ="slider" >
             <figure>
             <img src ="Images/img1.jpg">
             <img src ="Images/img2.jpg">
             <img src ="Images/img3.jpg">
             <img src ="Images/img4.jpg">

            </figure>
        </div>

提前致谢。

Answer 1

工作样本:JSFiddle

总宽度为 100%，高度为自动

你可以改变#slider的宽度

#slider {
  overflow: hidden;
  width: 50%;
}