Javascript 스와이프 기능 만들기2

[크레소티]

안녕하세요. 응용으로 해당 문제를 모든 슬라이드에 이벤트를 달고 진행 중인데요.

첫번째 슬라이드에서 클릭해서 좌우 이동은 문제가 없으나, 
두번째와 세번째 슬라이드에서 드래그 중에 첫번째 이미지가 표기되는 오류가 있습니다.
드래그가 끝나면 정상으로 다음 슬라이드든 이전 슬라이드로 이동합니다.

굵게 표기한 부분이 문제인 듯 한데, 이동한 좌표거리와 현재위치를 더해서 진행하였는데요.
console.log() 로 해당 변수 값을 확인했지만, 표기하는 값에는 이상 없는 것 같아 문의드려요.

let startLoc = 0;
let moveLoc = 0;
let locWidth = 0;
let slideTag = document.querySelectorAll('.slide-box  > img');
let targetTag = document.querySelector('.slide-container');
let pushChk = false;

for(let i=0;i<slideTag.length;i++) {

    slideTag[i].addEventListener('mousedown', function (e) {

        pushChk = true;
        startLoc = e.clientX;
    });

    slideTag[i].addEventListener('mousemove', function (e) {
        
        var movingLoc = 0;

        if(pushChk===true) {
            
            moveLoc = e.clientX - startLoc;    
            movingLoc = moveLoc + locWidth;

            targetTag.style.transform = `translateX(${movingLoc}px)`;
        }
    });

    slideTag[i].addEventListener('mouseup', function (e) {
        
        if(moveLoc < -100) {
                loc++;
            
            if(loc>2) 
                loc=0;
        } else if(moveLoc > 100) {
            loc--;
            
            if(loc<0) 
                loc=2;
        }
        locWidth = loc * -100;
        
        targetTag.style.transform = `translateX(${locWidth}vw)`;
        targetTag.style.transition = 'all 0.5s';
        pushChk = false;

        setTimeout(()=>{
            targetTag.style.transition = 'none';
        }, 500)
    });
}

[codingapple]

둘째사진 mousemove할 때는 (-100vw + 이동거리) 만큼 X축을 움직여줘야할듯요

[크레소티]

slide-box의 크기를 vw 단위로 지정한 것을 망각하였네요.
translateX를 px단위만 지정한 것이 문제인 것을 파악했습니다.

targetTag.style.transform = `translateX(calc(${locWidth}vw + ${moveLoc}px)`;

이렇게 해결하였습니다.
감사합니다.

[글쓴이]

글