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

27 Nov 2023

javascript

먼저, HTML에 이미지 갤러리를 구현합니다. 이미지 갤러리를 감싸는 컨테이너 요소와 이미지들을 포함하는 요소들로 구성됩니다. 예를 들어, 다음과 같은 HTML 마크업을 사용할 수 있습니다:

<div id="image-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

다음으로, Hammer.js를 로드하고 이미지 갤러리에 Hammer 인스턴스를 추가해야 합니다. 아래 코드는 jQuery와 Hammer.js를 사용하여 이미지 갤러리에 슬라이드 효과를 제어하는 예제입니다:

// Hammer.js 로드
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

$(document).ready(function() {
  // 이미지 갤러리 요소 선택
  var imageGallery = document.getElementById('image-gallery');
  
  // Hammer 인스턴스 생성
  var hammer = new Hammer(imageGallery);

  // swipeleft와 swiperight 제스처 이벤트 처리
  hammer.on('swipeleft swiperight', function(event) {
    // 왼쪽으로 스와이프 시 다음 이미지 표시
    if (event.type === 'swipeleft') {
      showNextImage();
    }
    // 오른쪽으로 스와이프 시 이전 이미지 표시
    else if (event.type === 'swiperight') {
      showPreviousImage();
    }
  });

  // 다음 이미지 표시 함수
  function showNextImage() {
    // 이미지 갤러리에서 현재 이미지 요소 선택
    var currentImage = imageGallery.querySelector('img:not(.hidden)');
    
    // 다음 이미지 요소 선택
    var nextImage = currentImage.nextElementSibling;
    
    // 다음 이미지가 없으면 첫 번째 이미지 선택
    if (!nextImage) {
      nextImage = imageGallery.querySelector('img:first-child');
    }
    
    // 현재 이미지 숨김 처리
    currentImage.classList.add('hidden');
    
    // 다음 이미지 표시
    nextImage.classList.remove('hidden');
  }

  // 이전 이미지 표시 함수
  function showPreviousImage() {
    // 이미지 갤러리에서 현재 이미지 요소 선택
    var currentImage = imageGallery.querySelector('img:not(.hidden)');
    
    // 이전 이미지 요소 선택
    var previousImage = currentImage.previousElementSibling;
    
    // 이전 이미지가 없으면 마지막 이미지 선택
    if (!previousImage) {
      previousImage = imageGallery.querySelector('img:last-child');
    }
    
    // 현재 이미지 숨김 처리
    currentImage.classList.add('hidden');
    
    // 이전 이미지 표시
    previousImage.classList.remove('hidden');
  }
});

위 코드에서 image-gallery 요소에 swipeleft와 swiperight 이벤트를 등록하고, 해당 이벤트가 발생하면 다음 이미지와 이전 이미지를 순환하도록 처리합니다. 이미지는 hidden 클래스를 사용하여 감추거나 표시합니다.

이제 Hammer.js를 사용하여 이미지 갤러리의 슬라이드 효과를 제어할 수 있습니다. 필요에 따라 코드를 수정하여 원하는 동작을 구현할 수 있습니다.