[javascript] 이미지 슬라이더에 이미지 드래그 앤 드롭 기능 추가하기

12 Dec 2023

javascript

이미지 슬라이더는 웹 페이지에서 시각적으로 매력적인 기능을 제공합니다. 이미지 슬라이더를 향상시키기 위해, 이미지를 드래그 앤 드롭하여 순서를 변경할 수 있는 기능을 추가하고 싶다면, JavaScript를 사용하여 다음과 같이 구현할 수 있습니다.

HTML 구조

먼저 이미지 슬라이더를 위한 기본적인 HTML 구조를 작성합니다.

<div class="slider">
  <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
  <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
  <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
  <!-- 추가적인 이미지들을 위한 슬라이드를 작성합니다 -->
</div>

JavaScript로 드래그 앤 드롭 기능 추가

다음으로, JavaScript를 사용하여 이미지를 드래그 앤 드롭하여 순서를 변경할 수 있는 기능을 추가합니다.

let isDragging = false;
let startPosition = 0;
let slideIndex = 0;

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');

slider.addEventListener('mousedown', (e) => {
  isDragging = true;
  startPosition = e.clientX;
});

slider.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const currentPosition = e.clientX;
    const difference = currentPosition - startPosition;
    slides.forEach((slide, index) => {
      slide.style.transform = `translateX(${(index - slideIndex) * 100 + difference}px)`;
    });
  }
});

slider.addEventListener('mouseup', () => {
  isDragging = false;
  slideIndex -= Math.round(startPosition - e.clientX) / 100;
  // 슬라이드 인덱스를 변경하고 애니메이션을 추가할 수 있습니다.
});

위의 JavaScript 코드는 마우스로 슬라이더를 클릭하고 드래그할 때, 드래그하는 동안 각 이미지를 움직여주는 기능을 구현합니다.

마치며

위의 예시는 간단한 이미지 슬라이더에 드래그 앤 드롭 기능을 추가하는 방법을 설명하고 있습니다. 사용자 경험을 향상시키기 위해 추가적인 기능이나 애니메이션을 포함하여 보다 풍부한 이미지 슬라이더를 만들 수 있습니다.

참고 문헌: