这个简单的JS幻灯片如何在看起来没有循环的情况下继续播放

var slides = document.getElementsByClassName("slide");
var currentIndex = 0;

function showSlide(index) {
  // 隐藏所有幻灯片
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  // 显示指定索引的幻灯片
  slides[index].style.display = "block";
}

function nextSlide() {
  currentIndex++;
  if (currentIndex >= slides.length) {
    currentIndex = 0; // 重置计数器变量
  }
  showSlide(currentIndex);
}

// 每隔3秒切换到下一张幻灯片
setInterval(nextSlide, 3000);

<style>
.slide {
  animation: slideshow 3s infinite;
}

@keyframes slideshow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

<div class="slide">幻灯片1</div>
<div class="slide">幻灯片2</div>
<div class="slide">幻灯片3</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet" />

<div class="slider">
  <div>幻灯片1</div>
  <div>幻灯片2</div>
  <div>幻灯片3</div>
</div>

<script>
$(document).ready(function() {
  $('.slider').bxSlider({
    auto: true,
    mode: 'fade',
    pause: 3000,
    controls: false
  });
});
</script>