[javascript] Hammer.js를 사용하여 이미지 갤러리의 슬라이드 이동 속도를 제어하는 방법은?

27 Nov 2023

javascript

Hammer.js 라이브러리를 프로젝트에 추가합니다. <script> 태그를 사용하여 CDN 링크를 추가하는 방법이나 다운로드 받아서 로컬에 추가하는 방법 중 어느 방법을 선택하실 수 있습니다. 프로젝트에 맞는 방법을 선택하시면 됩니다.
HTML 구조를 설정합니다. 이미지 갤러리를 위한 컨테이너 역할을 하는 요소를 만들고, 각 이미지를 담을 <div> 요소들을 추가합니다.
```
<div class="gallery-container">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>
```
CSS를 설정합니다. 이미지 갤러리 컨테이너와 각 슬라이드의 크기와 스타일을 지정합니다. 필요한 경우에는 슬라이드 이동 애니메이션을 추가할 수도 있습니다.
```
.gallery-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  float: left;
}
```
JavaScript 코드에서 Hammer.js를 초기화하고, 슬라이드 이동 속도를 설정합니다.
```
// Hammer.js 초기화
const galleryContainer = document.querySelector('.gallery-container');
const hammer = new Hammer(galleryContainer);
   
// 슬라이드 이동 속도 설정
hammer.get('pan').set({ threshold: 0, velocity: 0.1 });
```
위 코드에서 threshold는 터치 이동 거리의 최소값을 설정하며, velocity는 슬라이드 속도를 조절합니다. velocity 값이 크면 슬라이드 이동이 빠르게 일어나며, 작으면 느리게 이동합니다. 값은 0에서 1 사이의 실수로 설정할 수 있습니다. 값이 0보다 작으면 Positive 값으로 변경되어 처리됩니다.

이렇게 설정하면 Hammer.js를 사용하여 이미지 갤러리의 슬라이드 이동 속도를 제어할 수 있습니다. 참고로 위의 코드는 예시일 뿐이며, 프로젝트의 요구사항에 맞게 수정하셔야 합니다.

많은 웹 개발자들이 Hammer.js 공식 문서를 참고하여 더 많은 기능과 사용법을 익힐 수 있습니다.