I am so stuck, and wondering if I should continue relying on translate3d for scrolling.

I'm building my own custom slider/carousel that can show multiple posters at a time depending on screen size. But when I scroll using my mouse, I get mixed results, if I don't use the buttons, it scrolls using the mouse all the way back and forth just fine, but as soon as I click any of the left/right buttons, the mouse will stop scrolling.

I have a left and right button (absolute.) On each scroll, they scroll a set of items (3 - 5 items) using translate3d(), and they work perfectly fine and as expected.

<div class="container" style="display:flex; position:relative">
  <!---- Slider ---->
  <div class="slider" style="display:flex;>
    <div class="slide">
      <img src="..." />
    </div>
    <div class="slide">
      <img src="..." />
    </div>
    <div class="slide">
      <img src="..." />
    </div>
    <div class="slide">
      <img src="..." />
    </div>
    <!--- more slides -->
  </div>
  <!--- buttons on opposite ends of the slider, scrolls using translate3d() --->
  <div class="left" style="position:absolute;"></div>
  <div class="right" style="position:absolute;"></div>
</div>

The solutions that I have tried to make translate3d work are below.

• Force browser to create a new layer by adding Translate3D() to the slider and all of its children,
• Reverse container, then reverse slider to undo container's reversal. For this, I tried both transform scale, and flex-direction, but none of them worked 100% of the time. Very mixed results.
• Will-change, was happy when I saw this but it didn't work.
• A few more hacky methods. But none really worked for me.

My gut is telling me to just go with scrollLeft, or scroll into view, and call it a day. But I heard the performance of translateX is far superior, has this been absolutely confirmed? And are there any fairly recent, adopted alternatives out there that also perform well?

Thanks