캐러셀에 스와이프 기능 만들기 숙제 응용 1

[임진혁]

  $('.slide-box').eq(1).on('mousedown', function(e){
           시작좌표 = e.clientX
           눌렀냐 = true;
        });
      
        $('.slide-box').eq(1).on('mousemove', function(e){
            if(눌렀냐 == true){
           $('.slide-container').css('transform',
           `translate(${e.clientX - 시작좌표}px)`)
           console.log(e.clientX - 시작좌표)
            }
        });
        $('.slide-box').eq(1).on('mouseup', function(e){
            var 땐좌표 = e.clientX - 시작좌표
            눌렀냐 = false;
         
            if(땐좌표 < -100){
                $('.slide-container')
                .css('transform', 'translateX(-200vw)'); //세번째 이미지로 이동
            }
            else if(땐좌표 > -100){
              $('.slide-container')
                .css('transform', 'translateX(0)'); //2번째 이미지로 다시 돌아옴
            }
          });
이렇게 두 번째 이미지에서 클릭하여 슬라이드 하는 기능을 넣어봤는데
 첫 번째 이미지에서 두 번째 이미지로는 잘 슬라이드가 되지만 두 번째 에서
세 번째 이미지로 넘어갈 때 첫 번째 이미지 돌아가려는 현상이 나타납니다 여러번 드래그를 하다보면 넘어가지긴 하는데
매끄럽게 넘어가게 하고싶습니다 
이런 상황엔 어떻게 해야할까요 팁 부탁드립니다
영상을 첨부하고싶지만 올리는곳이 없네요

또는 eq(0) eq(1)이렇게 여러개말고 for문을 사용하여 eq(i)로 반복문을 써서 하는 방식도 가능할까요?

• 이 게시글은 임진혁에 의해 4 월, 3 주 전에 수정됐습니다.

[codingapple]

2번 이미지를 드래그할 때 100px 만큼 드래그하면 translate(100px) 하라는거 같은데
그건 1번 이미지정도만 보이는 위치겠군요  
반복적인 코드는 반복문으로 축약하면 됩니다

[글쓴이]

글