如何制作带有滚动功能的div幻灯片？

<div class="slider-container">
  <div class="slider-content">
    <!-- 幻灯片内容 -->
  </div>
</div>

.slider-container {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slider-content {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider-content .slide {
  width: 100%;
  height: 100%;
}

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

let isScrolling = false;
let startX;
let scrollLeft;

sliderContainer.addEventListener('mousedown', (e) => {
  isScrolling = true;
  startX = e.pageX - sliderContainer.offsetLeft;
  scrollLeft = sliderContainer.scrollLeft;
});

sliderContainer.addEventListener('mouseleave', () => {
  isScrolling = false;
});

sliderContainer.addEventListener('mouseup', () => {
  isScrolling = false;
});

sliderContainer.addEventListener('mousemove', (e) => {
  if (!isScrolling) return;
  e.preventDefault();
  const x = e.pageX - sliderContainer.offsetLeft;
  const walk = (x - startX) * 3; // 控制滚动速度
  sliderContainer.scrollLeft = scrollLeft - walk;
});