Carousel translate3d issue

Question

I have this issue. I know it is a well-knows error, but i was not able to fix it. So i have a carousel with the next structure:

Having an eventListener on the carousel (drag) makes a laggy slide effect. But if i transform the style.left there is no lag.

carousel.ondragstart = this.dragStart;
carousel.ondrag = this.drag;
carousel.ondragend = this.dragEnd;

This works fine:

  dragStart = (e) => {
    this.startX = e.clientX;
  }
  drag = (e) => {
    this.carousel.style.left = `${-this.elementIndex * this.album.clientWidth - (this.startX - e.clientX)}px`;
  }
  dragEnd = (e) => {
    this.carousel.style.left= `${-(++this.elementIndex * this.album.clientWidth)}px`;
  }

This has lag:

  dragStart = (e) => {
    this.startX = e.clientX;
  }
  drag = (e) => {
    this.carousel.style.transform = `translate3d(${-this.elementIndex * this.album.clientWidth - (this.startX - e.clientX)}px,0,0)`;
  }
  dragEnd = (e) => {
    this.carousel.style.transform = `translate3d(${-(++this.elementIndex * this.album.clientWidth)}px,0,0)`;
  }

Any ideas?