如何替换jquery在单击时切换幻灯片动作

<div class="slideshow">
  <img src="slide1.jpg" alt="Slide 1">
  <img src="slide2.jpg" alt="Slide 2">
  <img src="slide3.jpg" alt="Slide 3">
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>

.slideshow {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slideshow img.active {
  opacity: 1;
}

// 获取幻灯片容器和按钮
const slideshow = document.querySelector('.slideshow');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

// 获取所有幻灯片图片
const slides = slideshow.querySelectorAll('img');
let currentSlide = 0; // 当前显示的幻灯片索引

// 切换到指定索引的幻灯片
function showSlide(index) {
  // 隐藏当前幻灯片
  slides[currentSlide].classList.remove('active');
  // 显示新的幻灯片
  slides[index].classList.add('active');
  currentSlide = index;
}

// 切换到上一张幻灯片
function prevSlide() {
  let index = currentSlide - 1;
  if (index < 0) {
    index = slides.length - 1;
  }
  showSlide(index);
}

// 切换到下一张幻灯片
function nextSlide() {
  let index = currentSlide + 1;
  if (index >= slides.length) {
    index = 0;
  }
  showSlide(index);
}

// 绑定按钮点击事件
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

// 默认显示第一张幻灯片
showSlide(0);