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

Question

我正在尝试在我的网站上添加图像滑块。我的图像尺寸为 1650 x 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

为什么你不使用this？ 只需添加 css 和脚本，您就有一个开箱即用的轮播。