CSS:我们如何在slider中做幻灯片动画？

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

.slider-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider {
  width: 1500px; /* 幻灯片总宽度为每个幻灯片宽度的总和 */
  display: flex;
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.slide {
  width: 500px;
  height: 300px;
  position: relative;
}

/* 添加导航按钮样式 */
.button {
  /* 样式设置 */
}

const slider = document.querySelector('.slider');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

let slideIndex = 0;

prevButton.addEventListener('click', () => {
  slideIndex--;
  updateSliderPosition();
});

nextButton.addEventListener('click', () => {
  slideIndex++;
  updateSliderPosition();
});

function updateSliderPosition() {
  slider.style.transform = `translateX(-${slideIndex * 500}px)`;
}