[JavaScript] 캐러셀 스와이프 기능 구현

오늘은 마우스를 떼었을 때 일정거리 이상 이동했으면 2번 사진을 보여주고, 아니면 1번 사진을 보여주는 ui를 만들어 보자!

html

<div style="overflow: hidden">
    <div class="slide-container">
      <div class="slide-box">
        <img src="car1.png">
      </div>
      <div class="slide-box">
        <img src="car2.png">
      </div>
      <div class="slide-box">
        <img src="car3.png">
      </div>
    </div>
</div> 

폭이 300vm인 큰 박스 안에 작은 이미지 3개가 있는 레이아웃에
버튼을 누르면 박스 전체를 -100vw만큼 움직이는 캐러셀을 만들었습니다.

이제 구현해야 할 기능을 정리해보면,
기능 1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야 함
기능 2. 마우스를 뗐을 때 일정거리 이상 이동했으면 사진2를, 아니면 다시 사진 1을 보여줘야 함

먼저 기능 1을 구현해보기 전에
마우스로 어떤 html요소를 조작할 때 발생하는 mouse이벤트 3가지를 먼저 알아보겠습니다.

mouse 이벤트 3개

• mousedown : 어떤 요소에 마우스버튼 눌렀을 때
• mouseup : 어떤 요소에 마우스버튼 뗐을 때
• mousemove : 어떤 요소위에서 마우스 이동할 때

<div>캐러셀있는곳</div>

<script>
  $('.slide-box').eq(0).on('mousemove', function(){
    console.log('안녕')
  })
</script>

mousemove를 써서 이렇게 코드를 짜게 되면
.slide-box위에 마우스가 움직일때 마다 '안녕'이 출력 됨

<div>캐러셀있는곳</div>

<script>
  $('.slide-box').eq(0).on('mousemove', function(e){
    console.log(e.clientX)
  })
</script>

mouse이벤트리스너를 쓰고 e.clientX나 e.clientY를 출력해볼 수 있는데
현재 마우스 좌표를 알려줍니다.

그래서 이런걸 쓰면 유저가 사진을 얼마나 드래그 했는지 등을 알 수 있습니다.

기능 1. 드래그한 거리만큼 사진 움직이기

1-1. 이동거리 구하기

예를 들어 사진 1을 클릭하고 왼쪽으로 50px잡아끌었다면
사진 1도 왼쪽으로 50px움직여야 합니다.

그런데 사진 1만 움직이면 안되므로 사진 3개가 전부 담긴 큰 박스(.slide-box)를 옮겨보겠습니다.

우선 마우스를 누를때 X좌표 - 마우스 움직일 때의 X좌료를 하면 이동거리를 구할 수 있으니 빼보도록 하겠습니다

<script>
  let 시작좌표 = 0;

  $('.slide-box').eq(0).on('mousedown', function(e){
    시작좌표 = e.clientX;
  });

  $('.slide-box').eq(0).on('mousemove', function(e){
    console.log(e.clientX - 시작좌표)
  });
</script>

1. 좌표를 담을 변수를 함수들 바깥에 만들어 두기(지역변수 ㄴㄴ)
2. 마우스 클릭 시 현재 좌표를 let 시작좌표에 저장해 둠
3. mousemove 이벤트 발생 시 시작좌표에서 현재좌표인 e.clientX를 빼고 출력해서 확인해보면 현재 드래그 이동거리가 잘 나옴
   왼쪽으로 드래그하면 -100, 오른쪽으로 드래그하면 100이 출력됨.

이제 이동거리를 구했으니 "이동거리만큼 박스 이동"을 하는 코드를 짜보겠습니다.

1-2. 이동거리만큼 박스도 이동

<script>
  let 시작좌표 = 0;
  let 눌렀냐 = false;

  $('.slide-box').eq(0).on('mousedown', function(e){
    시작좌표 = e.clientX;
    눌렀냐 = true;
  });

  $('.slide-box').eq(0).on('mousemove', function(e){
    if (눌렀냐 === true) {
      $('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
    }
  });
</script>

박스 이동을 위해 margin-left를 줘도 되겠지만 translateX를 조절하여 움직이게 해주었고,

mousedown이벤트 리스너를 통해 마우스가 눌렸는지 여부를 체크함

1. 마우스를 누르면 let 눌렀냐 변수를 true로 만들고,
2. if문 안에선 눌렀냐가 true일 때만 박스를 움직이라고 코드를 짰음.