[javascript] Hammer.js를 사용하여 터치 이벤트를 슬라이드 제어에 적용하는 방법은?

27 Nov 2023

javascript

Hammer.js 라이브러리를 다운로드하고 페이지에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>

슬라이드를 감싸는 요소에 Hammer.js를 초기화하고 이벤트 리스너를 추가합니다.

// 슬라이드를 감싸는 요소 선택
var slideWrapper = document.getElementById('slide-wrapper');

// Hammer.js 초기화
var hammer = new Hammer(slideWrapper);

// 슬라이드 제어 이벤트 리스너 추가
hammer.on('swiperight', function() {
  // 오른쪽으로 스와이프 이벤트 발생 시 호출되는 함수
  // 슬라이드를 오른쪽으로 이동하는 로직
});

hammer.on('swipeleft', function() {
  // 왼쪽으로 스와이프 이벤트 발생 시 호출되는 함수
  // 슬라이드를 왼쪽으로 이동하는 로직
});

swiperight 이벤트와 swipeleft 이벤트에 대한 콜백 함수를 정의하여, 스와이프 이벤트 발생 시 슬라이드를 원하는 방향으로 이동하도록 합니다. 이 함수 안에 슬라이드를 이동시키는 로직을 추가하여야 합니다.

이렇게 하면 Hammer.js를 사용하여 터치 이벤트를 슬라이드 제어에 적용할 수 있습니다. 추가적으로, Hammer.js는 다양한 제스처 인식 기능을 제공하므로, 필요한 경우 다른 제스처도 추가로 적용할 수 있습니다.

참고 자료:

Hammer.js 공식 문서