所以我想在我的index.php上添加一个图像滑块。我遵循了一个关于这方面的教程，但css部分对我的图像没有影响。一开始我只能看到我的图像，在我继续学习教程后，我只能看到第一张图像。我使用的是.css文件。这是代码：
index.html:
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
}
#slider figure img {
width: 20%;
float: left;
animation: 20s slider infinite;
}
@keygrames slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="indexCSS.css">
</head>
<body>
<div class="topnav">
<a href="#">Welcome <?php echo $row["name"]; ?></a>
<a href="logout.php">Logout</a>
<a class="active" href="index.php">Home</a>
</div>
<div id="slider">
<figure>
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/img4.jpg">
<img src="img/img1.jpg">
</figure>
</div>
</body>
</html>如果您觉得它有帮助，请检查它。
body {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, #00a9ab 0%, #69279d 100%);
}
.slider-container {
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
}
.slider {
position: absolute;
display: flex;
height: 100%;
width: 500%;
animation: slide 15s infinite;
}
.slide {
position: relative;
display: inline-block;
width: 25%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.slide img {
width: 80%;
height: auto;
}
.slide:nth-of-type(2) img {
width: 40%;
height: auto;
}
@keyframes slide {
15% {
left: 0;
}
20% {
left: -100%;
}
35% {
left: -100%;
}
40% {
left: -200%;
}
55% {
left: -200%;
}
60% {
left: -300%;
}
75% {
left: -300%;
}
80% {
left: -400%;
}
95% {
left: -400%;
}
100% {
left: 0;
}
}<div class="slider-container">
<div class="slider">
<div class="slide"><img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946580/screen.png" alt="" /></div>
<div class="slide">
<img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550892255/screen-2.png" alt="" />
</div>
<div class="slide">
<img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946585/screen-3.png" alt="" />
</div>
<div class="slide">
<img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550892255/screen-4.png" alt="" />
</div>
<div class="slide">
<img src="https://res.cloudinary.com/cloud-image-storage/image/upload/v1550946580/screen.png" alt="" />
</div>
</div>
</div>