js图片带文字说明切换

<div class="slider">
  <div class="slide active">
    <img src="image1.jpg" alt="Description 1">
    <div class="caption">Caption for Image 1</div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Description 2">
    <div class="caption">Caption for Image 2</div>
  </div>
  <!-- Add more slides as needed -->
</div>
<button onclick="prevSlide()">Prev</button>
<button onclick="nextSlide()">Next</button>

.slider {
  position: relative;
  width: 80%;
  margin: auto;
}
.slide {
  display: none;
  text-align: center;
}
.slide.active {
  display: block;
}
.caption {
  margin-top: 10px;
  font-size: 16px;
}

function showSlide(n) {
  let slides = document.getElementsByClassName("slide");
  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  slides[n].classList.add("active");
}

function nextSlide() {
  let slides = document.getElementsByClassName("slide");
  let currentSlide = document.querySelector(".slide.active");
  let nextSlideIndex = Array.from(slides).indexOf(currentSlide) + 1;
  if (nextSlideIndex >= slides.length) {
    nextSlideIndex = 0;
  }
  showSlide(nextSlideIndex);
}

function prevSlide() {
  let slides = document.getElementsByClassName("slide");
  let currentSlide = document.querySelector(".slide.active");
  let prevSlideIndex = Array.from(slides).indexOf(currentSlide) - 1;
  if (prevSlideIndex < 0) {
    prevSlideIndex = slides.length - 1;
  }
  showSlide(prevSlideIndex);
}