[shopping mall] Carousel longClick (2021 02 28) - adelakim5/fe-w3-shopping GitHub Wiki
구현한 내용
- 롱클릭 캐러셀 (2초동안 누르고 있으면 슬라이드 2장씩 넘어가기)
롱클릭 캐러셀
- 기본 캐러셀 구현은 click 이벤트를 걸어주면 되지만, 롱클릭은 단순히 click이벤트로 구현하기는 어렵다.
- 사용자가 마우스를 클릭한 시점, 마우스에서 클릭을 뗀 시점에 따라 다른 동작을 걸어주어야 하기 때문이다.
mousedown, mouseup
mousedown: 사용자가 마우스 클릭을 누르고 있는 때에 거는 이벤트이다.
사용자가 2초동안 마우스 클릭한 상태를 유지하고 있는지 확인해주어야 하기 때문에, 여기서 setInterval을 사용해줄 수 있다.
let timer;
let isPressed = false;
nextButton.addEventListener("mousedown", () => {
isPressed = true;
timer = setInterval(() => {
// .. 슬라이드 두 장 넘어가는 동작 실행
}, 2000) // 2초마다 검사
})
사용자가 마우스에서 손을 떼면, 동작을 멈춰야 한다. => 타이머를 지운다.
즉, mouseup일 때, clearInterval을 한다.
nextButton.addEventListener("mouseup", () => {
if(isPressed) clearInterval(timer);
})
이렇게 되면 사용자가 마우스를 클릭하고 있는 시간이
- 2초 -> 2장
- 4초 -> 2장 + 2장 = 4장 이런식으로 넘어가게 된다.
이렇게만 구현하면 이 캐러셀은 반드시 2초 이상 클릭하고 있어야만 2장씩 이동한다.
한번만 클릭할땐 슬라이드 한개만 이동하도록 하고 싶으면, 다음을 추가한다.
isMoved = false; // slide가 두 장 이동했는지 아닌지 체크
nextButton.addEventListener("mousedown", () => {
isPressed = true;
timer = setInterval(() => {
// .. 슬라이드 두 장 넘어가는 동작 실행
isMoved = true; // 두 장 이동했음을 체크
}, 2000) // 2초마다 검사
})
nextButton.addEventListener("mouseup", () => {
if(isPressed) clearInterval(timer);
if(!isMoved) { // 슬라이드가 두 장 이동하지 않았으면
// .. 슬라이드 한 장 넘어가는 동작 실행
}
})
슬라이드 두 장씩 이동시키기
기본 캐러셀에서는 currIndex를 하나씩 증감시켰다.
따라서 두 장씩 이동시키려면? currIndex를 하나 더 증감시켜야 한다.
// nextButton을 눌렀을 때 슬라이드가 두 장 이동하는 코드
if(currIndex <= slideLen-1) {
slideList.style.transition = `${speed}ms`;
slideList.style.transform = `translateX(-${width * (currIndex + 2 + 1)}px)`; // 하나 더 증가
}
// prevButton을 눌렀을 때 슬라이드가 반대로 두 장 이동하는 코드
if(currIndex >= 0) {
slideList.style.transition = `${speed}ms`;
slideList.style.transform = `translateX(-${width * (currIndex - 1)}px)`; // 하나 더 감소
}