Skip to content

[shopping mall] Carousel longClick (2021 02 28)

Jump to bottom
adelakim5 edited this page Feb 28, 2021 · 1 revision

구현한 내용

  1. 롱클릭 캐러셀 (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)`; // 하나 더 감소
}
Clone this wiki locally