I am making an image carousel feature, I have completed the sliding with forwarding and backward buttons with transform property. But now I am facing problems doing it perfectly with mouse events like when the mouse is clicked and dragged to left then making a smooth and user-friendly image carousels. How can I do it?

Here is the example code: - https://jsfiddle.net/dy1vk40f/1/

Any guide provided would be greatly appreciated

function moveable(e) {
  if(!isDown) return;
  e.preventDefault();
  
  const x = e.pageX - scrollcontainer.offsetLeft;
  const style = window.getComputedStyle(scrollcontainer);
  const matrix = new WebKitCSSMatrix(style.transform);

  const walk = x - startX;
  const walktwo = walk * 10;
  scrollcontainer.style.userSelect = 'none';
  scrollcontainer.style.transform = `translate3d(${matrix.m41 + walk}px, 0px, 0px)`;
  startX = e.pageX;
  texx.innerHTML = `Tranlate: ${matrix.m41}`;