将页面添加到滑块(html)

<div class="slider-container">
  <div class="slider">
    <div class="page">页面1的内容</div>
    <div class="page">页面2的内容</div>
    <div class="page">页面3的内容</div>
    <!-- 更多页面元素 -->
  </div>
</div>

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

.slider {
  width: 100%;
  height: 100%;
  display: flex;
}

.page {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

// 获取滑块容器和滑块元素
const container = document.querySelector('.slider-container');
const slider = document.querySelector('.slider');

// 监听滑动事件
container.addEventListener('scroll', function() {
  // 计算当前滑块的位置
  const scrollLeft = container.scrollLeft;
  const pageIndex = Math.round(scrollLeft / container.offsetWidth);

  // 切换到对应的页面
  slider.style.transform = `translateX(-${pageIndex * 100}%)`;
});