[javascript] 이미지 슬라이더에 이미지 마우스 휠 이벤트 추가하기

12 Dec 2023

javascript

이미지 슬라이더에 사용자 편의성을 더하기 위해 이미지 마우스 휠 이벤트를 추가하는 것은 매우 흥미로운 기능입니다. 사용자가 마우스 휠을 이용하여 이미지를 슬라이드하는 것은 사용하기 쉽고 직관적인 방식입니다. 이 기능은 사용자 경험을 향상시키고 웹사이트를 더 매력적으로 만들 수 있습니다.

1. 마우스 휠 이벤트 리스너 추가

마우스 휠 이벤트를 감지하고 슬라이드를 변경하기 위해 이미지 슬라이더에 마우스 휠 이벤트 리스너를 추가해야 합니다. 이를 위해 JavaScript에서 addEventListener를 사용합니다.

const slider = document.querySelector('.slider');
slider.addEventListener('wheel', (event) => {
  if (event.deltaY < 0) {
    // 마우스 휠을 위로 스크롤할 때의 동작
    // 이전 이미지로 슬라이드
  } else {
    // 마우스 휠을 아래로 스크롤할 때의 동작
    // 다음 이미지로 슬라이드
  }
});

2. 이미지 슬라이드 변경

마우스 휠 이벤트가 발생했을 때, 현재 이미지를 변경하여 스와이프 효과를 구현해야 합니다.

const slider = document.querySelector('.slider');
let currentImageIndex = 0;

slider.addEventListener('wheel', (event) => {
  if (event.deltaY < 0) {
    // 마우스 휠을 위로 스크롤할 때의 동작
    currentImageIndex = (currentImageIndex - 1 + totalImages) % totalImages;
    // 이전 이미지로 슬라이드
    showImageAtIndex(currentImageIndex);
  } else {
    // 마우스 휠을 아래로 스크롤할 때의 동작
    currentImageIndex = (currentImageIndex + 1) % totalImages;
    // 다음 이미지로 슬라이드
    showImageAtIndex(currentImageIndex);
  }
});

function showImageAtIndex(index) {
  // 이미지 슬라이드 표시 로직
}

위의 코드에서 totalImages는 이미지의 총 갯수를 의미합니다.

이제, 이미지 슬라이더에 마우스 휠 이벤트를 추가하여 사용자가 편리하게 이미지를 슬라이드하고 탐색할 수 있게 되었습니다.

마우스 휠 이벤트를 통해 사용자가 이미지 슬라이더를 쉽게 조작하도록 개선하는 것은 사용자 경험을 향상시키고 웹사이트의 매력을 높이는 데 도움이 될 것입니다.