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

27 Nov 2023

javascript

Hammer.js는 터치 이벤트를 처리하기 위한 오픈 소스 라이브러리입니다. 이를 사용하여 슬라이더에 터치 이벤트를 적용하는 방법을 알아보겠습니다.

먼저, Hammer.js 라이브러리를 HTML 문서에 포함해야 합니다. 다음 코드를 사용하여 라이브러리를 로드하세요.

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

그리고 슬라이더 요소를 선택하고 Hammer.js를 초기화합니다. 다음은 예제 코드입니다.

<div id="slider">슬라이더</div>

<script>
  var slider = document.getElementById('slider');
  var hammertime = new Hammer(slider);

  hammertime.on('swipeleft', function() {
    // 슬라이더를 왼쪽으로 스와이프했을 때 실행될 코드 작성
  });

  hammertime.on('swiperight', function() {
    // 슬라이더를 오른쪽으로 스와이프했을 때 실행될 코드 작성
  });

  hammertime.on('tap', function() {
    // 슬라이더를 탭했을 때 실행될 코드 작성
  });
</script>

위의 코드에서는 swipeleft, swiperight, tap 이벤트에 대한 처리를 정의했습니다. 각 이벤트에 대해 원하는 동작을 적용할 수 있습니다.

이제 슬라이더 요소를 터치하거나 스와이프하는 동작에 따라 이벤트 처리 코드가 실행됩니다.

더 많은 터치 이벤트를 처리하려면 Hammer.js 문서를 참조하세요. 추가적인 설정 및 커스터마이징에 대한 정보도 제공됩니다.

참고:

Hammer.js 공식 문서: https://hammerjs.github.io/