如何用html、css和javascript制作卡片滑块

<div class="slider">
  <div class="slide-card"></div>
</div>

.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slide-card {
  width: 300px;
  height: 200px;
  background-color: #ccc;
  position: absolute;
  transition: transform 0.3s ease-in-out;
}

const slider = document.querySelector(".slider");
const slideCard = document.querySelector(".slide-card");

let isDragging = false;
let startPosX = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationId = 0;

slideCard.addEventListener("mousedown", dragStart);
slideCard.addEventListener("touchstart", dragStart);
slideCard.addEventListener("mouseup", dragEnd);
slideCard.addEventListener("touchend", dragEnd);
slideCard.addEventListener("mousemove", drag);
slideCard.addEventListener("touchmove", drag);

function dragStart(e) {
  if (e.type === "touchstart") {
    startPosX = e.touches[0].clientX;
  } else {
    startPosX = e.clientX;
    e.preventDefault();
  }
  isDragging = true;
  animationId = requestAnimationFrame(animation);
}

function dragEnd() {
  isDragging = false;
  cancelAnimationFrame(animationId);

  const threshold = slider.clientWidth / 5;
  if (Math.abs(currentTranslate) > threshold) {
    if (currentTranslate > 0) {
      currentTranslate = threshold;
    } else {
      currentTranslate = -threshold;
    }
  } else {
    currentTranslate = 0;
  }

  setPositionByIndex();
}

function drag(e) {
  if (isDragging) {
    let currentPositionX = 0;
    if (e.type === "touchmove") {
      currentPositionX = e.touches[0].clientX;
    } else {
      currentPositionX = e.clientX;
    }
    const diffX = currentPositionX - startPosX;
    currentTranslate = prevTranslate + diffX;
  }
}

function setPositionByIndex() {
  slideCard.style.transform = `translateX(${currentTranslate}px)`;
  prevTranslate = currentTranslate;
}

function animation() {
  setPositionByIndex();
  if (isDragging) {
    requestAnimationFrame(animation);
  }
}