선생님 안녕하세요
2번에서 3번 사진으로는 잘 넘어가는데 넘어갈때 드래그가 안되서 넘어가집니다..
'mousemove' 이벤트에서 translateX(calc(e.client - 시작좌표)px + 100vw)) 했는데 그러네요..여기서 문제가
있는 건가요?? 문제가 있다면 저 100vw가 문제인것 같은데...넘겨진 뷰포트를 좌표값에 더해야된다고 생각했는데
아닌가봐요.. 피드백 주시면 감사하겠습니다!
let 시작좌표 = 0;
let 눌렀냐 = false;
document.querySelectorAll('.slide-box')[1].addEventListener('mousedown', function (e) {
시작좌표 = e.clientX;
눌렀냐 == true
})
document.querySelectorAll('.slide-box')[1].addEventListener('mousemove', function (e) {
if (눌렀냐 == true) {
document.querySelector('.slide-container').style.transform = `translateX(calc(${e.clientX - 시작좌표}px + 100vw))`
}
document.querySelectorAll('.slide-box')[1].addEventListener('mouseup', function (e) {
눌렀냐 = false;
if (e.clientX - 시작좌표 < -400) {
document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
document.querySelector('.slide-container').style.transition = 'all 0.5s'
} else {
document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
}
})
})
