使用js和/或css让Slider自动滚动图像

<div class="slider">
  <div class="slider-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

.slider {
  width: 100%;
  overflow: hidden;
}

.slider-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider-container img {
  width: 100%;
  height: auto;
}

var sliderContainer = document.querySelector('.slider-container');
var images = document.querySelectorAll('.slider-container img');
var imageIndex = 0;
var slideInterval = setInterval(nextSlide, 3000); // 每3秒切换一张图片

function nextSlide() {
  imageIndex = (imageIndex + 1) % images.length;
  sliderContainer.style.transform = 'translateX(' + (-imageIndex * 100) + '%)';
}