使三个div自动播放并显示它们的隐藏文本

<div class="slider">
  <div class="slide active">
    <div class="content">
      <h3>Slide 1</h3>
      <p>Hidden text for slide 1</p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h3>Slide 2</h3>
      <p>Hidden text for slide 2</p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h3>Slide 3</h3>
      <p>Hidden text for slide 3</p>
    </div>
  </div>
</div>

.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.content h3 {
  font-size: 24px;
}

.content p {
  font-size: 16px;
}

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;

function nextSlide() {
  slides[currentSlide].classList.remove('active');
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].classList.add('active');
}

setInterval(nextSlide, 3000);