使用CSS动画选择同级元素时的滑动框

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

.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.slide:nth-child(1) {
  background-color: #ff0000;
}

.slide:nth-child(2) {
  background-color: #00ff00;
}

.slide:nth-child(3) {
  background-color: #0000ff;
}

const slider = document.querySelector('.slider');
let currentIndex = 0;

function slideTo(index) {
  const slideWidth = slider.offsetWidth;
  const offset = -index * slideWidth;
  slider.style.transform = `translateX(${offset}px)`;
  currentIndex = index;
}

setInterval(() => {
  const nextIndex = (currentIndex + 1) % 3;
  slideTo(nextIndex);
}, 2000);