后退按钮在 JavaScript 轮播中不起作用

Question

我是一个使用 JavaScript 制作旋转木马的初学者，我有一个后退按钮，当我点击它时它不起作用。这是我用来处理按钮点击的 JavaScript 代码：

var slidesTab = [
  document.getElementById("slide-1"),
  document.getElementById("slide-2"),
  document.getElementById("slide-3")
];

var nextBtn = document.getElementById("next");
var prevBtn = document.getElementById("previous");

var currentSlide = 0;

prevBtn.addEventListener("click", function() {
  if (currentSlide > 0) {
    currentSlide = currentSlide - 1;
    slide();
  } else if (currentSlide == 0) {
    currentSlide = slidesTab.length - 1;
    slide();
  }
});

nextBtn.addEventListener("click", function() {
  if (currentSlide < slidesTab.length - 1) {
    currentSlide = currentSlide + 1;
    slide();
  } else if (currentSlide == slidesTab.length - 1) {
    currentSlide = 0;
    slide();
  }
});

function slide() {
  slidesTab[currentSlide].style.opacity = 1;
  currentSlide = (currentSlide + 1) % slidesTab.length;
  slidesTab[currentSlide].style.opacity = 0;
}

.carousel {
  padding: 0;
  width: 15cm;
  height: 7cm;
  overflow: hidden;
  border-radius: 15px;
  margin: 0 auto 65px auto;
  border: solid lightgray 1px;
  box-shadow: 1px 1px 4px 2px lightgray;
}

.carousel-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  position: absolute;
}

.slide-1 {
  background-image: url("https://images.pexels.com/photos/3783471/pexels-photo-3783471.jpeg");
  background-size: cover;
  background-position: center;
}

.slide-2 {
  background-image: url("https://images.pexels.com/photos/574069/pexels-photo-574069.jpeg");
  background-size: cover;
  background-position: center;
}

.slide-3 {
  background-image: url("https://images.pexels.com/photos/701773/pexels-photo-701773.jpeg");
  background-size: cover;
  background-position: center;
}

<div id="carousel" class="carousel">
  <div id="previous" class="arrow">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="white">
        <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
      </svg>
  </div>
  <div id="next" class="arrow">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960" fill="white">
        <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
      </svg>
  </div>
  <div class="carousel-content">
    <div id="slide-1" class="slide slide-1"></div>
    <div id="slide-2" class="slide slide-2"></div>
    <div id="slide-3" class="slide slide-3"></div>
  </div>
</div>
</div>

但是，当我点击后退按钮时，没有任何反应。另一方面，下一个按钮工作得很好。我已经检查了控制台以查看是否有任何错误，但我没有发现任何错误。我还检查了我的代码中是否正确引用了 HTML 元素。

作为一个初学者，我卡住了，我不知道该怎么做才能解决这个问题。你能帮我理解为什么后退按钮不起作用以及如何解决它吗？我还在学习中，还望大家多多包涵。

提前感谢您的帮助！