如何使用HTML和CSS创建图像滑块

Question

我正试图在我的网站上添加一个图像滑块。我的照片尺寸是1650乘350，有4张这样大小的照片。我试过用HTML和CSS来做这件事，但不幸的是，图像并没有自动移动，我试着让它在CSS中自动移动。我想知道可能出了什么问题。

CSS：

.slider {
width: 1600px;
height: 350px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 2000px;
background-color: pink;
height: 350px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target~.image-container {
left: 0px;
}
#slide-2:target~.image-container {
left: -1600px;
}
#slide-3:target~.image-container {
left: -3200px;
}
#slide-4:target~.image-container {
left: -4800px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}

HTML:

<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<span id="slide-4"></span>
<div class="image-container">
<img src="./assets/slider-1.jpg" class="slide" width="1650" height="350" />
<img src="./assets/slider-2.jpg" class="slide" width="1650" height="350" />
<img src="./assets/slider-3.jpg" class="slide" width="1650" height="350" />
<img src="./assets/slider-4.jpg" class="slide" width="1650" height="350" />
</div>
<div class="buttons">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
</div>
</div>

Answer 1

为什么不使用它？只需添加css和脚本，就可以开箱即用地使用旋转木马了。