캐러셀 스와이프 기능중 문의 드립니다

document.querySelectorAll('.slide-box')[0].addEventListener('mousedown', function (e) {
            startX = e.clientX;
            console.log(startX)
            mousedown = true;
        })
        document.querySelectorAll('.slide-box')[0].addEventListener('mouseup', function (e) {
            console.log('뗌')
            mousedown = false;
        })
        document.querySelectorAll('.slide-box')[0].addEventListener('mousemove', function (e) {
            endX = e.clientX;
            let distance = endX - startX;
            console.log(distance);
            if (mousedown) {
                document.querySelector('.slide-container').style.transform = `translateX(${distance}px)`
            }
        })
마우스를 떼고 있는 상태에서도 스와이프 기능이 작동되어 문제인데 콘솔로 확인해 보니
드래그 후 뗐을 때 mouseup이 작동하지 않고 그 상태에서 한 번더 클릭을 해야 작동이 됩니다
이벤트 버블링이 일어난거 같은데 어디가 문제일까요