캐러셀 스와이프 응용

[정창엽]

var 시작좌표 = 0;
var 누름 = false;
$('.slide-box').on('mousedown', function(e){
    var id = e.target.dataset.id;
    var value = parseInt(e.target.dataset.value);

    시작좌표 = e.clientX;
    누름 = true;

    currentSlide(id, value);
});

function currentSlide(id, value){
    $('.slide-box').eq(id).on('mouseup', function(e){
        누름=false;
        console.log("넘어온 id 값" + id);
        console.log(e.clientX - 시작좌표);

        if(id == 0){
            console.log("id = 0");
            if(e.clientX - 시작좌표 <= -300){
                $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
            }
            else{
                $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)');
            }
        }
        if(id == 1){
            console.log("id = 1");
            if(e.clientX - 시작좌표 <= -300){
                $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-200vw)');
            }
            else if (e.clientX - 시작좌표 >= 300){
                $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(0vw)');
            }
            else{
                $('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
            }
        }
        if(id == 2){
            console.log("id = 2");
            if(e.clientX - 시작좌표 >= 300){
                $('.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');
            console.log("지움");
        },500)
    });
    $('.slide-box').eq(id).on('mousemove', function(e){
        // console.log("여긴 무슨 값" + id, e.clientX - 시작좌표);
        if(누름==true ){
            if((e.clientX - 시작좌표) < 0 && id == 0){
                $('.slide-container').css('transform', `translateX(calc(${e.clientX - 시작좌표}px - ${value}vw))`);
            }
            else if(id == 1){
                $('.slide-container').css('transform', `translateX(calc(${e.clientX - 시작좌표}px - ${value}vw))`);
            }
            else if((e.clientX - 시작좌표) > 0 && id == 2){
                $('.slide-container').css('transform', `translateX(calc(${e.clientX - 시작좌표}px - ${value}vw))`);
            }
        }
    });
}
응용 1, 2번 정상적으로 작동합니다.

궁금한 부분이  있어서 질문합니다. 

calc() 안 쓰면 실시간으로 translateX가 안되고 그림만 팍팍 변하던데, 서로 다른 단위의 
사칙연산이라서 실시간으로 반영이 안되는걸까요? 제가 생각하는 게 아니라면 다른 이유가
궁금합니다.

가끔씩 그림을 팍팍 넘기면 애니메이션 씹히는 현상이 생기는데 혹시 제가 작성한 코드에서
애니메이션 씹히는 현상을 야기하는 부분이 있을까요?
아니면 단순히 너무 빠르게 이동해서 브라우저가 반응을 못 하는 걸까요?

맨날 맨날 질문 해서 죄송하지만, 좀 귀찮게 하겠습니다 .허허허허;;

[codingapple]

transition : all 0.5s 스타일이 잘 붙는지확인하거나 css파일에 .slide-container{ transform : translateX(0vw) } 같은 스타일 넣어봅시다

[글쓴이]

글