如何在CSS中实现Flexbox轮播图布局_Flex wrap与transition动画方案

<div class="carousel">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  <div class="slide">Slide 4</div>
</div>

.carousel {
  display: flex;
  flex-wrap: nowrap; /* 所有slide在一行 */
  overflow: hidden;  /* 隐藏超出部分 */
  width: 100%;       /* 视口宽度 */
}
.slide {
  min-width: 100%;   /* 每张slide占满容器宽度 */
  flex-shrink: 0;    /* 禁止压缩 */
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.carousel {
  transition: transform 0.5s ease-in-out; /* 平滑过渡 */
}
<p>/<em> 示例：显示第2张幻灯片 </em>/
.carousel.move-1 {
transform: translateX(-100%);
}
.carousel.move-2 {
transform: translateX(-200%);
}</p>

const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
<p>function goToSlide(index) {
if (index < 0) index = slides.length - 1;
if (index >= slides.length) index = 0;
currentIndex = index;
carousel.style.transform = <code>translateX(-${currentIndex * 100}%)</code>;
}</p><p>// 下一张
document.getElementById('next').addEventListener('click', () => {
goToSlide(currentIndex + 1);
});</p><p>// 上一张
document.getElementById('prev').addEventListener('click', () => {
goToSlide(currentIndex - 1);
});</p>