如何在HTML中制作图像滑块？

<div id="slider-container">
  <img src="image.jpg" alt="Slider Image">
</div>

#slider-container {
  width: 400px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#slider-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

var container = document.getElementById("slider-container");
var image = container.querySelector("img");

container.addEventListener("mousemove", function(event) {
  var containerWidth = container.offsetWidth;
  var imageWidth = image.offsetWidth;
  var mouseX = event.clientX - container.offsetLeft;
  var maxOffset = imageWidth - containerWidth;
  var offset = (mouseX / containerWidth) * maxOffset;

  image.style.left = -offset + "px";
});