使用css生成一段前端轮播图代码

以下是一个基于 CSS 实现的简单前端轮播图代码：

HTML 代码：

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">
  <div class="slides">
    <div class="slide slide1">
      <img src="https://via.placeholder.com/800x300?text=Slide+1" alt="Slide 1">
    </div>
    <div class="slide slide2">
      <img src="https://via.placeholder.com/800x300?text=Slide+2" alt="Slide 2">
    </div>
    <div class="slide slide3">
      <img src="https://via.placeholder.com/800x300?text=Slide+3" alt="Slide 3">
    </div>
  </div>
  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

CSS 代码：

.slider {
  position: relative;
}

.slides {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 300px;
}

.slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

label {
  cursor: pointer;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  transition: background-color 0.5s;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked + label {
  background-color: #333;
}

这个轮播图代码中，使用了 `input` 和 `label` 元素来实现轮播图的切换，利用 CSS 3 中的 `scroll-snap-type` 和 `scroll-snap-align` 属性实现轮播图的滚动效果，同时配合 `scroll-behavior` 和 `-webkit-overflow-scrolling` 属性来实现平滑的滚动效果。在 `label` 元素中，利用了伪类 `:checked` 来动态改变选中状态下的背景颜色，从而实现轮播图的自动切换。