如何在图像滑块上设置滑动动画

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

.slider-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease-in-out;
}

.slider img {
  width: 500px;
  height: 300px;
  margin-right: 10px;
}

const slider = document.querySelector('.slider');
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;

slider.addEventListener('mousedown', startDrag);
slider.addEventListener('touchstart', startDrag);
slider.addEventListener('mouseup', endDrag);
slider.addEventListener('touchend', endDrag);
slider.addEventListener('mousemove', drag);
slider.addEventListener('touchmove', drag);

function startDrag(event) {
  if (event.type === 'touchstart') {
    startPos = event.touches[0].clientX;
  } else {
    startPos = event.clientX;
    slider.style.cursor = 'grabbing';
  }
  isDragging = true;
}

function drag(event) {
  if (isDragging) {
    let currentPosition;
    if (event.type === 'touchmove') {
      currentPosition = event.touches[0].clientX;
    } else {
      currentPosition = event.clientX;
    }
    const diff = currentPosition - startPos;
    currentTranslate = prevTranslate + diff;
    slider.style.transform = `translateX(${currentTranslate}px)`;
  }
}

function endDrag() {
  prevTranslate = currentTranslate;
  isDragging = false;
  slider.style.cursor = 'grab';
}