JavaScript(캐러셀에 스와이프 기능 넣기)

캐러셀(carousel)이란?

캐러셀(carousel)은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트입니다.

 

 

스와이프 기능 넣기

var 시작좌표 = 0;
var 눌렀냐 = false;
var 이동거리 = 0;

$('.slide-box')
  .eq(0)
  .on('mousedown', function (e) {
    시작좌표 = e.clientX;
    눌렀냐 = true;
  });
$('.slide-box')
  .eq(0)
  .on('mousemove', function (e) {
    if (눌렀냐) {
      이동거리 = e.clientX - 시작좌표;
      $('.slide-container').css('transform', `translateX(${이동거리}px)`);
    }
  });
$('.slide-box')
  .eq(0)
  .on('mouseup', function (e) {
    눌렀냐 = false;
    if (이동거리 < -100) {
      $('.slide-container').css({
        transform: 'translateX(-100vw)',
        transition: '1s',
      });
    } else {
      $('.slide-container').css({
        transform: 'translateX(0)',
        transition: '1s',
      });
    }
    setTimeout(function () {
      $('.slide-container').css('transition', 'none');
    }, 1000);
  });

 

var 시작좌표 = 0;, var 눌렀냐 = false;, var 이동거리 = 0; 

스와이프를 시작할 때의 좌표값을 저장하는 시작좌표 변수, 

마우스 버튼을 눌렀는지 여부를 저장하는 눌렀냐 변수, 

요소의 이동 거리를 저장하는 이동거리 변수를 선언합니다.

 

$('.slide-box').eq(0).on('mousedown', function (e) { ... }); 

스와이프 기능을 적용할 요소와 이벤트 타입을 지정하여 이벤트 핸들러를 등록합니다. 

마우스 버튼이 눌렸을 때의 좌표 값을 시작좌표 변수에 저장하고, 눌렀냐 변수를 true로 변경합니다. 

 

$('.slide-box').eq(0).on('mousemove', function (e) { ... }); 

스와이프 기능을 적용할 요소와 이벤트 타입을 지정하여 이벤트 핸들러를 등록합니다. 

마우스가 움직일 때, 눌렀냐 변수가 true일 때만 요소를 이동시킵니다. 

요소의 이동 거리는 현재 마우스 좌표와 시작좌표를 차이를 구하여 계산하며, transform 속성을 이용하여 요소의 위치를 이동시킵니다. 

 

$('.slide-box').eq(0).on('mouseup', function (e) { ... }); 

스와이프 기능을 적용할 요소와 이벤트 타입을 지정하여 이벤트 핸들러를 등록합니다. 

마우스 버튼이 떼어진 시점에 요소의 위치를 제한하고, transition 속성을 이용하여 애니메이션 효과를 추가합니다. 

요소의 이동 거리가 -100px보다 클 경우, 요소를 왼쪽으로 이동시키고, 그 외의 경우에는 원래 위치로 돌아오도록 처리합니다. 

setTimout() 함수를 사용하여 transition 속성이 적용된 시간(1초) 후에 transition 속성을 초기화합니다. 

이렇게 구현된 스와이프 기능을 이용하면 마우스로 요소를 드래그하여 이동시킬 수 있으며, 

마우스 버튼을 떼는 시점에 요소의 위치를 제한하여 부드러운 애니메이션 효과를 추가할 수 있습니다.