如何在图像幻灯片中添加按钮prev和next？

<div id="slideshow">
  <img src="image1.jpg" alt="Image 1">
  <button id="prevButton">Prev</button>
  <button id="nextButton">Next</button>
</div>

#slideshow {
  position: relative;
}

#slideshow img {
  width: 100%;
  height: auto;
}

#prevButton,
#nextButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #000;
  color: #fff;
  border: none;
  cursor: pointer;
}

#prevButton {
  left: 10px;
}

#nextButton {
  right: 10px;
}

var slideshow = document.getElementById('slideshow');
var prevButton = document.getElementById('prevButton');
var nextButton = document.getElementById('nextButton');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图像文件名列表
var currentIndex = 0; // 当前图像索引

// 切换到上一张图像
prevButton.addEventListener('click', function() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  slideshow.querySelector('img').src = images[currentIndex];
});

// 切换到下一张图像
nextButton.addEventListener('click', function() {
  currentIndex = (currentIndex + 1) % images.length;
  slideshow.querySelector('img').src = images[currentIndex];
});