캐러셀 응용문제 2번째 질문드립니다.

[윤준호]

첫 사진이 넘어간 이후로 두번째 사진에서 세번째 사진으로 넘기는 응용2번 하고 있는데,
기존 수업에서 첫 사진에서 두번째 사진으로 넘어갈때와 똑같이 하면 되는 거 같아서, 
기존의 $('.slide-box').eq(0).on('mousedown', function(e){  이 부분의 eq(0)을 1로 바꿔주어서 

        var 시작좌표2 = 0;
        var 마우스누름2 = false;

        $('.slide-box').eq(1).on('mousedown', function(e){
            시작좌표2 = e.clientX;   
            마우스누름2 = true;
        });

        $('.slide-box').eq(1).on('mousemove', function(e){
            if(마우스누름2 == true){
               $('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표2}px )`) 
            }
        });

        $('.slide-box').eq(1).on('mouseup', function(e){
            마우스누름2 = false;  

            if(e.clientX - 시작좌표2 < -450 ){   
                $('.slide-container')
                    .css('transition', 'all 0.3s')
                    .css('transform', 'translateX(-100vw)');
            } 
                else {
                $('.slide-container')
                .css('transition', 'all 0.3s')
                .css('transform', 'translateX(0vw');
            }

        })

이렇게 했는데 작동되지 않네요..ㅜㅜ 뭐가 문제일까요?

[codingapple]

코드 대충짜면 파멸만이 있을 뿐입니다
`translateX( ${e.clientX - 시작좌표2}px )`
이런 값도 의도대로 잘 설정되나 확인해봅시다

[윤준호]

"`translateX( ${e.clientX - 시작좌표2}px )`
이런 값도 의도대로 잘 설정되나 확인해봅시다" 라고 하셨는데,
eq(0)일때는 잘 작동하던데 eq(1)일때는 작동을 왜 이상하게 하는지 모르겠습니다. 

eq(1) 이 두번째 사진이어서  변수를 새롭게 var 시작좌표2 = 0; var 마우스누름2 = false;로 지정하고
다른 코드는 eq(0)과 똑같이 작성했는데 eq(1) (두번째사진)에서 클릭을 하면 막 자기멋대로 동작하는데...
뭐가 문제인지 잘 모르겠는데 힌트를 여쭤봐도 될까요?

[윤준호]

문제점을 더 말씀드리면..
첫 사진(eq(0)) 에서는 마우스를 찍고, 끌면! 로그에 이동시킨 거리가 잘 나오는데
두번쨰사진( eq(1))으로 넘어가서는 마우스를 찍는 순간, 첫번째 사진으로 막 나려고 하더라구요...

번거롭게 질문드려서 죄송합니다.. 주말 잘 보내세요..ㅜㅜ

[codingapple]

둘째사진 눌러서 100px 스와이프하면 
`translateX( ${e.clientX - 시작좌표2}px )`
이건 아마 translateX(-100px) 대충 이렇게 될거같은데 이러면 첫사진이 보이는 위치라서 그런듯요

[글쓴이]

글