document.querySelectorAll('.slide-box')[0].addEventListener('mousedown',(e) => {
start = e.clientX
console.log(start)
click = true;
console.log(true)
document.querySelector('.slide-container').classList.remove('transition')
})
document.querySelectorAll('.slide-box')[0].addEventListener('mouseup',(e) => {
click = false;
console.log(e.clientX-start)
if(e.clientX-start < -454){
document.querySelector('.slide-container').style='transform: translateX(-100vw);'
document.querySelector('.slide-container').classList.add('transition')
}else {
document.querySelector('.slide-container').style.cssText='transform: translateX(0vw); '
document.querySelector('.slide-container').classList.add('transition')
}
})
document.querySelectorAll('.slide-box')[0].addEventListener('mousemove',(e) => {
if(click == true){
console.log(e.clientX-start)
document.querySelector('.slide-container').style=`transform: translateX(${e.clientX-start}px)`
}
})
document.querySelectorAll('.slide-box')[1].addEventListener('mousedown',(e) => {
start = e.clientX
console.log(start)
click = true;
console.log(true)
document.querySelector('.slide-container').classList.remove('transition')
})
document.querySelectorAll('.slide-box')[1].addEventListener('mouseup',(e) => {
click = false;
console.log(e.clientX-start)
if(e.clientX-start < -454){
document.querySelector('.slide-container').style='transform: translateX(-200vw);'
document.querySelector('.slide-container').classList.add('transition')
}else {
document.querySelector('.slide-container').style.cssText='transform: translateX(-100vw); '
document.querySelector('.slide-container').classList.add('transition')
}
})
document.querySelectorAll('.slide-box')[1].addEventListener('mousemove',(e) => {
if(click == true){
console.log(e.clientX-start)
document.querySelector('.slide-container').style=`transform: translateX(-${e.clientX-start}px)`
}
})
위 같은 식으로 만들어놨는데 2번째 사진에서 드래그 하려고 하면 계속 첫 번째 사진으로 넘어가는데 어떻게 해결할 수 있을까요?
