캐러셀 스와이프 기능 만들기

안녕하세요 선생님
캐러셀 스와이프 기능을 만드는데 이해가 안되는 부분이 많아서 질문 드립니다.

1. 이동거리에서 시작좌표 - e.clientX를 하면 마우스를 왼쪽으로 움직였을 때 양수가 나오는 이유는 무엇인가요?
마우스를 왼쪽으로 움직이면 음수가 나와야 하는 것 아닌가요? 잘 이해가 안됩니다ㅠㅠ

2. 1번 사진에서 2번 사진으로 넘어갈 때는 드래그한 만큼 사진이 움직이는데 2번 사진에서 3번 사진으로 넘어갈 때는 드래그 한 만큼 움직이지 않고 사진이 한번에 넘어갑니다.
이유가 무엇일까요?

3. 2번 사진에서 3번 사진으로 넘어갈 때 이동거리에서 -100vw를 더하는 이유는 무엇인가요?

4. 2번 사진에서 3번 사진으로 넘어가는 기능이 작동하지 않습니다. 뭐가 문제일까요?ㅠㅠ

5. 뒤로가기 기능에서도 드래그 한 만큼 사진이 움직이지 않습니다. 어느 부분이 틀린걸까요?

이해가 안되는 부분이 많아 질문이 좀 많습니다.ㅠㅠ
답변 부탁드립니다.



var 시작좌표 = 0;
      var 클릭 = false;
      var 이동거리 = 0;

      // 1번사진 ---------------
      $('.slide-box').eq(0).on('mousedown', function(e){
        시작좌표 = e.clientX;
        console.log(시작좌표);
        클릭 = true; // mousedown을 했는지 변수로 기록 
      });

      $('.slide-box').eq(0).on('mousemove', function(e){
        이동거리 = e.clientX - 시작좌표; // 마우스가 이동한 거리 
        console.log(이동거리);
        if (클릭 == true) {
          $('.slide-container').css('transform', `translateX(${이동거리}px)`)
        }
      });

      $('.slide-box').eq(0).on('mouseup', function(e){
        클릭 = false;
        if (이동거리 < -200){
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)')
        } else {
          $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)')
        }
        setTimeout(() => {
          $('.slide-container').css('transition', 'none');
        }, 500);
      });

      // 2번 사진 --------------------
      $('.slide-box').eq(1).on('mousedown', function(e){
        시작좌표 = e.clientX;
        console.log(시작좌표);
        클릭 = true;
      });

      $('.slide-box').eq(1).on('mousemove', function(e){
        이동거리 = e.clientX - 시작좌표; // 마우스가 이동한 거리 
        console.log(이동거리);
        if (클릭 == true) {
          $('.slide-container').css('transform',  `translateX(calc(${이동거리}px-100vw))`)
        }
      });

      $('.slide-box').eq(1).on('mouseup', function(e){
        클릭 = false;
        if (이동거리 < -200){
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)')
        } else {
          $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)')
        }
        setTimeout(() => {
         $('.slide-container').css('transition', 'none');
       }, 500);
      });

      // 사진 뒤로 이동하기 기능
      // 3번 사진 -> 2번 사진
      $('.slide-box').eq(2).on('mousedown', function(e){
        시작좌표 = e.clientX;
        console.log(시작좌표);
        클릭 = true;
      });

      $('.slide-box').eq(2).on('mousemove', function(e){
        이동거리 = e.clientX - 시작좌표; // 마우스가 이동한 거리 
        console.log(이동거리);
        if (클릭 == true) {
          $('.slide-container').css('transform',  `translateX(cals(${-(이동거리)}px-100vw)`)
        }
      });

      $('.slide-box').eq(2).on('mouseup', function(e){
        클릭 = false;
        if (이동거리 > 200){
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)')
        } else {
          $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)')
        }
        setTimeout(() => {
         $('.slide-container').css('transition', 'none');
       }, 500);
      });

      // 2번 사진 -> 1번 사진 
      $('.slide-box').eq(1).on('mousedown', function(e){
        시작좌표 = e.clientX;
        console.log(시작좌표);
        클릭 = true;
      });

      $('.slide-box').eq(1).on('mousemove', function(e){
        이동거리 = e.clientX - 시작좌표; // 마우스가 이동한 거리 
        console.log(이동거리);
        if (클릭 == true) {
          $('.slide-container').css('transform',  `translateX(cals(${-(이동거리)}px`)
        }
      });

      $('.slide-box').eq(1).on('mouseup', function(e){
        클릭 = false;
        if (이동거리 > 200){
        $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)')
        } else {
          $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)')
        }
        setTimeout(() => {
         $('.slide-container').css('transition', 'none');
       }, 500);
      });