如何让滑块自动循环？

// HTML结构示例
<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

// CSS样式示例
.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 500px;
  height: 300px;
  display: none;
}

// JavaScript代码示例
var slides = document.getElementsByClassName("slide");
var currentSlide = 0;

function showSlide(slideIndex) {
  // 隐藏当前显示的滑块
  slides[currentSlide].style.display = "none";
  // 显示下一个滑块
  slides[slideIndex].style.display = "block";
  // 更新当前滑块索引
  currentSlide = slideIndex;
}

function nextSlide() {
  var nextSlideIndex = (currentSlide + 1) % slides.length;
  showSlide(nextSlideIndex);
}

// 每隔3秒切换到下一个滑块
setInterval(nextSlide, 3000);

<!-- HTML结构示例 -->
<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

<!-- CSS样式示例 -->
<style>
.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 500px;
  height: 300px;
  animation: slideAnimation 9s infinite;
  opacity: 0;
  position: absolute;
}

@keyframes slideAnimation {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  53.33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>