캐러셀 스와이프 응용질문

안녕하세요 선생님

캐러셀 스와이프 응용문제 풀고 있는데 질문 있습니다.

지금 앞뒤로 스와이프 하는건 잘 되는데 첫번째를 제외한 나머지 슬라이드는 mousedown을 한 상태로 mousemove를 했을때 슬라이드 애니메이션이 제대로 작동하지않고 그냥 이전/다음 사진으로 넘어갑니다.
어떻게 해결할 수 있을까요?

그리고 제가 확장성을 좀 높이고 싶어서 인덱스를 $(e.currentTarget).index()를 해서 구했는데 이렇게 하면 addeventlistener가 중첩이 되는데 중첩됐을때 기능이 많이 떨어지는지도 궁금합니다.

답변 미리 감사드립니다.

<script>
var start = 0;
var isDown = false;
let i = 0;
$('.slide-box').on('mousedown', function(e) {
    i = $(e.currentTarget).index();
    $('.slide-box').eq(i).on('mousedown', function(e) {
        start = e.clientX;
        isDown = true;
    });

    $('.slide-box').eq(i).on('mousemove', function(e) {
        if (isDown && i == 0) {
            $('.slide-container').css('transform', `translateX(${e.clientX - start}px)`);
         } else if (isDown && i != 0) {
            $('.slide-container').css('transform', `translateX(${e.clientX - start}px - 100vw)`);
         };
    });

    $('.slide-box').eq(i).on('mouseup', function(e) {
        isDown = false;

        if (e.clientX - start < -100 && isDown == false && i < 2) {
            $('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(-${i+1}00vw)`);
         } else if (e.clientX - start > 100 && isDown == false && i > 0) {
            $('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(-${i-1}00vw)`);
         };
        setTimeout(() => {
            $('.slide-container').css('transition', 'none')
         }, 500);
       });
    }); 
</script>