캐러셀에 스와이프 - 응용 질문있습니다.

[신기훈]

응용 : 2번사진에서 3번사진으로 넘어갈때 구현하기.

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){
        console.log(e.clientX - 시작좌표2)
        $('.slide-container').css('transform', `translateX(-${e.clientX-시작좌표2}px)`)
    }
    
});
   
    $('.slide-box').eq(1).on('mouseup', function(e){
    눌렀냐2 = false;
    if(e.clientX-시작좌표2 >0){
                $('.slide-container').css('transition', 'all 0.5s')
                 .css('transform','translateX(-100vw)')  
                  }              // 왼쪽으로 스와이프 되는 것을 방지하기 위함
else if(e.clientX-시작좌표2 < -100){
    $('.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시간동안 머리 쥐어 짜면서 구현해봤습니다.
1) 2번에서 3번으로 사진은 잘 넘어가는데, 첨부한 사진(1번 사진에서 2번사진으로 넘길때)이 당겨지지는 않고
그냥 2번화면에 있다가 3번으로 넘어가는데 무엇을 빼먹은 것일까요?.. (순간이동 하지는 않고, transition 효과는 생깁니다.)
진짜 도저히 모르겠습니다 .. (1번에서 2번으로 넘어가는 코드는 애플님과 동일합니다.)

2) 2번에서 3번으로 넘어감을 구현할 때  `translateX(-${e.clientX-시작좌표2}px)`
이부분 $ 앞에 - 를 넣으니 구현이 잘 되어서 이렇게 짜봤는데 이렇게 짜는건 괜찮은 방법인가요?


  

[codingapple]

넴 사진왼쪽으로 이동시키려면 -100px 이런식으로 줘야할듯요
2번째사진움직일땐 100vw도 더해야할수도요

[글쓴이]

글