How to change minimum move to Scroll CSS / JS

i have a very large horizontal relative carousel, and normally i handle changing images by clicking on buttons which works perfectly fine, but everything is also scrollable overflow: auto , however, with scrollbar hidden.

I added some touchEvents for mobile and my goal is to make touching behave same as button clicks. And they work fine, but my problem is that im also using scroll-snap-type: x mandatory, and i feel like it need less than 100px to move to another image. Sometimes it prevents my handleNext() or handlePrev() from firing. I don’t want to lower it less than 100px

my react component:

function handleTouchEnd() {
    if (touchStart && touchEnd) {
        if (touchStart - touchEnd > 100) {
            handleNext()                          // moves to right image
        } else if (touchStart - touchEnd < -100) {
            handlePrev()                         // moves to left image
        }
    }
}

return (
    <div className={s.pageWrapper}>
        onTouchStart={(e) => setTouchStart(e.targetTouches[0].clientX)}
        onTouchMove={(e) => setTouchEnd(e.targetTouches[0].clientX)}
        onTouchEnd={handleTouchEnd}