如何使用HTML和CSS创建一个响应式图片滑块布局

<div class="slider-container">
  <div class="slider-slide">
    <img src="image1.jpg" alt="Image 1">
    <h2>标题1</h2>
    <p>描述1</p>
  </div>
  <div class="slider-slide">
    <img src="image2.jpg" alt="Image 2">
    <h2>标题2</h2>
    <p>描述2</p>
  </div>
  <div class="slider-slide">
    <img src="image3.jpg" alt="Image 3">
    <h2>标题3</h2>
    <p>描述3</p>
  </div>
</div>

.slider-container {
  display: flex; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth; 
}

.slider-slide {
  flex-shrink: 0; 
  width: 100%; 
  min-width: 100%; 
  scroll-snap-align: start; 
}

img {
  width: 100%; 
  height: auto; 
}

h2, p {
  margin: 10px; 
}

const sliderContainer = document.querySelector('.slider-container');

function autoScroll() {
  const scrollAmount = sliderContainer.offsetWidth;
  const scrollInterval = setInterval(() => {
    sliderContainer.scrollLeft += 1;
    if (sliderContainer.scrollLeft % scrollAmount === 0) {
      clearInterval(scrollInterval);
      setTimeout(autoScroll, 2000); // 间隔2秒后重新开始自动滚动
    }
  }, 10); // 设置滚动速度
}

autoScroll(); // 启动自动滚动