[javascript] 28. 마우스 이벤트로 캐러셀 스와이프

마우스 이벤트

mousedown

어떤 요소에 마우스버튼 눌렀을 때

mouseup

어떤 요소에 마우스버튼 뗐을 때

mousemove

어떤 요소위에서 마우스 이동할 때

예전 포스팅에서 만들었던 캐러셀 html이다

<div style="overflow: hidden">
        <div class="slide-container">
          <div class="slide-box">
            <img src="car1.png" draggable="false" />
          </div>
          <div class="slide-box">
            <img src="car2.png" />
          </div>
          <div class="slide-box">
            <img src="car3.png" />
          </div>
        </div>
      </div>
      <button class="prev">이전</button>
      <button class="slide-1">1</button>
      <button class="slide-2">2</button>
      <button class="slide-3">3</button>
      <button class="next">다음</button>
    </div>

---

마우스 이벤트로 캐러셀 스와이프

• 마우스 이벤트로 slide-box 3개를 스와이프로 넘기기
• 100px 이상 스와이프하면 다음 캐러셀로 이동, 아니면 이전 캐러셀로 이동

우선 첫번째 slide-box에만 적용을 해보기

 $(".slide-box").eq(0).on("mousedown", function (e) {
          let startpoint = e.clientX;
        });

e.clientX는 현재 마우스의 x 좌표이다
마우스 다운 이벤트 즉 마우스를 클릭했을 때의 좌표이다

마우스를 클릭하고 움직이며 캐러셀을 이동시켜야 하니까 mousemove 이벤트도 필요하다

let isClick = false;
let startpoint = 0;
let moving = 0;

$(".slide-box").eq(0).on("mousedown", function (e) {
  startpoint = e.clientX;
  isClick = true;
});
// 마우스를 움직이면 발생하는 이벤트 
 $(".slide-box").eq(0).on("mousemove", function (e) {
   if (isClick) {
     moving = startpoint - e.clientX;
     $(".slide-container").css("transform", `translateX(-${moving}px)`);
   }
 });

마우스를 클릭한 후에 움직임을 감지해야하기 때문에 isClick 불린변수를 만들어서 mousedown 이벤트를 관리한다

그리고 100px 이상 움직였는지 확인하기 위해 움직임의 양을 계산해야하기 때문에 startpoint를 전역변수로 만들었다
[startpoint - mousemove(마우스가 움직이는 실시간 좌표)]

isClick= true 라면 moving 양 만큼 캐러셀을 이동시킨다

⚠️ 문제는 마우스를 떼도 캐러셀이 마우스 이동양만큼 이동한다는 것이다

➡️ mouseup 이벤트 추가

$(".slide-box").eq(0).on("mouseup", function () {
  isClick = false;
  if (moving >= 100) {
    $(".slide-container")
      .css("transform", `translateX(-100vw)`)
      .css("transition", "all 1s");
  } else {
    $(".slide-container")
      .css("transform", `translateX(0)`)
      .css("transition", "all 1s");
          }
  setTimeout(() => {
    $(".slide-container").css("transition", "none");
  }, 1000);
});

mouseup이 되면 isClick=false로 만든다
그리고 moving이 100px이상이면 2번째 캐러셀로, 100px 이하면 1번째 캐러셀로 이동시킨다
그리고 서서히 이동시키기 위해 tansition을 추가했다

이동이 끝나면 버벅임 제거를 위해 1초뒤에 transition:none으로 변경하여 효과를 없앤다

모바일 버전은 터치 이벤트리스너

touchstart

터치시작시 발동

touchmove

터치중일 때 계속 발동

touchend

터치종료시 발동

그리고 현재 좌표를 알려주는 e.clientX ``e.touches[0].clientX 로 바꾸면 된다

Hammer.js

마우스 이벤트부터 터치 이벤트까지 ,, 지금까지 작성한 코드는 너무 길다
그래서 자바스크립트는 외부 라이브러리에 대한 의존도가 언제나 높다
Hammer.js를 사용하면 여러 제스처를 감지하는 이벤트리스너 사용이 가능하며 간략하게 작성이 가능하다