如何使用CSS Grid和Javascript制作幻灯片

<div id="slideshow-container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

#slideshow-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3个幻灯片，每个幻灯片宽度为1fr */
  width: 100%;
  height: 300px; /* 设置幻灯片容器的高度 */
}

.slide {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

const slideshowContainer = document.getElementById('slideshow-container');
const slides = Array.from(slideshowContainer.getElementsByClassName('slide'));
let currentSlideIndex = 0;

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? 'block' : 'none';
  });
}

function nextSlide() {
  currentSlideIndex = (currentSlideIndex + 1) % slides.length;
  showSlide(currentSlideIndex);
}

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