[javascript] Hammer.js를 사용하여 커스텀 스와이프 기능을 구현하는 방법은?

27 Nov 2023

javascript

Hammer.js를 다운로드하여 HTML 파일에 추가합니다.

<script src="hammer.min.js"></script>

스와이프를 처리할 요소를 선택하고 인스턴스를 생성합니다.

var element = document.getElementById("myElement");
var hammertime = new Hammer(element);

스와이프 이벤트를 처리하는 핸들러 함수를 작성합니다.

hammertime.on("swipeleft", function(event) {
  // 왼쪽으로 스와이프했을 때 실행할 코드
});

hammertime.on("swiperight", function(event) {
  // 오른쪽으로 스와이프했을 때 실행할 코드
});

hammertime.on("swipeup", function(event) {
  // 위쪽으로 스와이프했을 때 실행할 코드
});

hammertime.on("swipedown", function(event) {
  // 아래쪽으로 스와이프했을 때 실행할 코드
});

원하는 동작을 처리할 코드를 각 이벤트 핸들러 함수에 추가합니다.

위 예시에서는 swipeleft, swiperight, swipeup, swipedown 이벤트를 사용하여 해당 방향으로 스와이프했을 때 각각 다른 동작을 수행하도록 구현하였습니다. 원하는 동작을 추가하여 커스텀 스와이프 기능을 구현할 수 있습니다.

더 많은 Hammer.js의 제스처 이벤트와 옵션에 대해서는 공식 문서를 참고하시기 바랍니다.