用纯CSS写一个带箭头和圆点的轮播图代码

以下是一个简单的用纯CSS实现带箭头和圆点的轮播图代码：

HTML代码：

<div class="slider">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="slide">
    <img src="image4.jpg" alt="Image 4">
  </div>
  <div class="slide">
    <img src="image5.jpg" alt="Image 5">
  </div>
</div>

<div class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<button class="prev"><</button>
<button class="next">></button>

CSS代码：

* {
  box-sizing: border-box;
}

.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-points-x: repeat(100%);
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.slide img {
  width: 100%;
}

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

.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: gray;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: black;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

这个轮播图使用了CSS的scroll-snap-type属性实现滚动到每个图片时自动对齐，使用了CSS的scroll-behavior属性和JavaScript的scrollIntoView()方法实现点击圆点滚动到对应图片的功能。同时，使用了CSS的伪类:hover和:focus实现了鼠标悬浮在箭头上时显示手型的效果。