var 시작좌표 = 0;
var 누름 = false;
$('.slide-box').on('mousedown', function(e){
var id = e.target.dataset.id;
console.log(e.target);
console.log(id);
시작좌표 = e.clientX;
누름 = true;
currentSlide(id);
});
function currentSlide(id){
$('.slide-box').eq(id).on('mouseup', function(e){
누름=false;
console.log("넘어온 id 값" + id);
console.log(e.clientX - 시작좌표);
if(e.clientX - 시작좌표 < -300 && id == 0){
console.log("id = 0");
$('.slide-container').css('transition', 'all 0.5s').css('transform', 'translateX(-100vw)');
}else if(e.clientX - 시작좌표 > -300 && id == 0){
$('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(0vw)`);
}else if(e.clientX - 시작좌표 < -300 && id == 1){
$('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(-200vw)`);
}else if(e.clientX - 시작좌표 > -300 && id == 1){
$('.slide-container').css('transition', 'all 0.5s').css('transform', `translateX(-100vw)`);
}
// if((e.clientX - 시작좌표) < -300 && id == 1){
// console.log("id = 1");
// $('.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-contatiner').css('transition', 'none');
console.log("지움");
},500)
});
$('.slide-box').eq(id).on('mousemove', function(e){
console.log("여긴 무슨 값" + id, e.clientX - 시작좌표);
if(누름==true){
$('.slide-container').css('transform', `translateX(${e.clientX - 시작좌표}px)`);
}
});
}
dataset 이용해서 만들고 있습니다.
dataset 값이 잘 넘어갈때도 있고, 처음 console.log(id)에선 1로 나오다가
currentSlide 함수에서 넘겨받은 값은 0으로 나올때도 있습니다.
mousemove에서 id값 출력해보면 1이였다가 갑자기 0으로 출력됩니다.
아마도 두번째사진(id 값 1)에서 클릭후 오른쪽으로 끌고가면 저절로 첫번째사진(id 값 0)
으로 저절로 돌아가는거 때문에 그런거 같습니다.
왜 첫번재 사진으로 돌아갈려는지 감이 안 오네요 ;;
그리고 setTimeout 으로 transition none 해도 처음 빼고는 반응이 느립니다.
