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

Question

我试图在我的网站上添加一个图像滑块。我的图片大小是1650x350，有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

为什么不使用this？只需添加css和脚本，您就有了开箱即用的旋转木马。