example code: - https://jsfiddle.net/dy1vk40f/

I want to make a image carousel feature, I implemented everything with two button :- forward and backword to scroll according to the buttons. I have used scrollcontainer.style.transform = translate3d(-250px, 0px, 0px); to move the images forward and vice versa. Now I want to implement a feature where when the mouse is clicked on the container and drag to left or right, I want to again change the transform property. But I am struggling to do it properly.

I have this code, but it gives a very glitchy scroll and I don't think its the right way to do it. Is there any other, it would be great help if anyone can help

let isDown = false;
let startX;
let scrollLeft;

scrollcontainer.addEventListener('mousedown', (e) => {
    isDown = true;
    startX = e.pageX;
    console.log(startX);
});

scrollcontainer.addEventListener('mouseleave', (e) => {
  isDown = false;
});

scrollcontainer.addEventListener('mouseup', (e) => {
  isDown = false;
});

scrollcontainer.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  
  const x = e.pageX;

  const walk = (x - startX) * 3;
  scrollcontainer.style.transform = `translate3d(${walk}px, 0px, 0px)`;
  console.log({walk, startX});
  console.log('gg');
});```