10 분 캐러셀에 스와이프 기능 만들기

캐러셀에 스와이프 기능 만들기는 이상없이 했는데 더 확장해 보고 싶어
오토바이 그림에서 다음으로 마우스 이동을 해보니 되지 않더라구요

그래서 오토바이에도 이벤트 걸어주고  -200에 동적으로 이동할 수 있게 수정했는데 잘 안되네요
혹시 무슨 문제가 있을까요?
그냥 혼자 짜본 소스입니다.


       let startIdx = 0;
        let clickChk = false;
        let moveChk  = false;
        var calcVal  = 0;
        
        $('.slide-box').on('mousedown', function(e){
           startIdx = e.clientX;
           clickChk = true;
           console.log('startOrginIdx=' +  startIdx);    
        });
        
        $('.slide-box').on('mousemove', function(e){
           if(clickChk == true){
               console.log('clientX =' +  e.clientX); //좌측으로 갈수록 작아지고(양수), 우측으로 갈수록 커짐(음수)
               console.log('startIdx=' +  startIdx);
               console.log('moveX=' +  (e.clientX - startIdx));
               
               var selIdx  = $(e.target).parent().index() + 1; //index 0부터 시작하는 부분을 계산을 위해 1부터 시작
               var sumIdx  = $(e.target).parent().length;
               
               
               $('.slide-container').css('transform', `translateX(${e.clientX - startIdx}px )`);
 
               calcVal = selIdx * -100;
               console.log("calcVal=" + calcVal);
               
               if(e.clientX - startIdx < -100){
                   moveChk = true;
               }else{
                   moveChk = false;
               }
           }
        });
        
        $('.slide-box').on('mouseup', function(e){
           clickChk = false;
        
           console.log("clickChk="+ clickChk);    
           console.log("moveChk ="+ moveChk);
            
           if(moveChk){
              $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX('+ calcVal +'vw)');
           }else{
              $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)'); 
           }
            
           setTimeout(()=>{
               $('.slide-container').css('transition', 'none');
           }, 500)    
            
        });