不管你有图片还是div，机制都是一样的。你基本上设置了初始活动幻灯片，创建了转到上一张或下一张幻灯片的函数。每次你都需要检查活动幻灯片是第一张还是最后一张。

const slides = document.querySelectorAll(".carousel div")
const firstSlide = 0
const lastSlide = slides.length - 1
let activeSlide = 0

const goToPreviousSlide = () => {
  slides[activeSlide].classList.remove("active")
  if (activeSlide !== firstSlide) {
    activeSlide = activeSlide - 1
  } else {
    activeSlide = lastSlide
  }
  slides[activeSlide].classList.add("active")
}

const goToNextSlide = () => {
  slides[activeSlide].classList.remove("active")
  if (activeSlide !== lastSlide) {
    activeSlide = activeSlide + 1
  } else {
    activeSlide = firstSlide
  }
  slides[activeSlide].classList.add("active")
}

.container {
  display: flex;
}
.carousel {
  padding: 2rem;
}
.carousel div {
  display: none;
}
.carousel div.active {
  display: block;
}

<div class="container">
    <button onclick="goToPreviousSlide()">Previous</button>
    <div class="carousel">
        <div class="active">slide 1</div>
        <div>slide 2</div>
        <div>slide 3</div>
        <div>slide 4</div>
    </div>
    <button onclick="goToNextSlide()">Next</button>
</div>