可以为javascript/HTML幻灯片/carousel创建一个后退按钮吗？

<div id="carousel">
  <!-- 幻灯片/轮播项 -->
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  
  <!-- 后退按钮 -->
  <button id="backButton">后退</button>
</div>

// 获取幻灯片容器和后退按钮元素
var carousel = document.getElementById('carousel');
var backButton = document.getElementById('backButton');

// 后退按钮点击事件处理函数
backButton.addEventListener('click', function() {
  // 获取当前显示的幻灯片索引
  var currentIndex = Array.from(carousel.children).indexOf(document.querySelector('.slide:not(.hidden)'));
  
  // 计算后退后的幻灯片索引
  var prevIndex = (currentIndex - 1 + carousel.children.length) % carousel.children.length;
  
  // 隐藏当前幻灯片，显示后退后的幻灯片
  carousel.children[currentIndex].classList.add('hidden');
  carousel.children[prevIndex].classList.remove('hidden');
});