[javascript] 드래그 앤 드롭 기능을 사용한 웹사이트용 슬라이더 구현 방법

29 Nov 2023

javascript

이번 블로그 포스트에서는 웹사이트에 드래그 앤 드롭 기능을 사용하여 슬라이더를 구현하는 방법을 알아보겠습니다.

1. HTML 구조 설정하기

먼저, 슬라이더를 위한 HTML 구조를 설정해야 합니다. 아래는 슬라이더에 필요한 HTML 요소의 예입니다.

<div id="slider">
  <div class="slider-track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

슬라이더는 slider라는 id를 가진 상위 요소와 slider-track 클래스를 가진 슬라이드들로 구성됩니다.

2. CSS 스타일 적용하기

슬라이더에 적절한 CSS 스타일을 적용하여 드래그 앤 드롭 기능이 잘 동작하도록 해야 합니다. 아래는 만들어진 HTML에 스타일을 적용하는 예입니다.

#slider {
  width: 400px;
  height: 200px;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: 0.3s ease;
}

.slide {
  flex: 0 0 400px;
  height: 100%;
}

위의 CSS 코드는 슬라이더의 크기와 슬라이드들의 스타일을 지정합니다. 이 스타일은 슬라이더의 가로 크기, 슬라이드간의 넓이 및 높이 등을 조정할 수 있습니다.

3. JavaScript를 사용하여 드래그 앤 드롭 기능 구현하기

이제 JavaScript를 사용하여 슬라이더의 드래그 앤 드롭 기능을 구현해보겠습니다. 아래는 기본적인 드래그 앤 드롭 기능을 구현하는 JavaScript 코드입니다.

const sliderTrack = document.querySelector('.slider-track');
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationId;

sliderTrack.addEventListener('mousedown', dragStart);
sliderTrack.addEventListener('touchstart', dragStart);
sliderTrack.addEventListener('mouseup', dragEnd);
sliderTrack.addEventListener('touchend', dragEnd);
sliderTrack.addEventListener('mousemove', drag);
sliderTrack.addEventListener('touchmove', drag);
sliderTrack.addEventListener('mouseleave', dragEnd);

function dragStart(event) {
  event.preventDefault();
  startPos = getPositionX(event);
  isDragging = true;
  animationId = requestAnimationFrame(animation);
  sliderTrack.classList.add('grabbing');
}

function drag(event) {
  if (isDragging) {
    const currentPosition = getPositionX(event);
    currentTranslate = prevTranslate + currentPosition - startPos;
  }
}

function dragEnd() {
  cancelAnimationFrame(animationId);
  isDragging = false;
  const threshold = 100;
  if (currentTranslate < -threshold) {
    // Move to next slide
  } else if (currentTranslate > threshold) {
    // Move to previous slide
  } else {
    // Return to current slide
  }
  sliderTrack.style.transform = `translateX(${currentTranslate}px)`;
  sliderTrack.classList.remove('grabbing');
}

function getPositionX(event) {
  return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}

function animation() {
  sliderTrack.style.transform = `translateX(${currentTranslate}px)`;
  if (isDragging) {
    requestAnimationFrame(animation);
  }
}

위의 JavaScript 코드는 마우스 이벤트와 터치 이벤트를 사용하여 슬라이더 슬라이드의 드래그 앤 드롭 동작을 처리합니다. 드래그하는 동안의 좌표를 기반으로 슬라이드의 이동을 처리하고, 드래그가 끝나면 애니메이션을 통해 슬라이드를 부드럽게 이동시킵니다.

결론

이렇게 HTML, CSS 및 JavaScript를 사용하여 드래그 앤 드롭 기능을 통해 웹사이트용 슬라이더를 구현할 수 있습니다. 슬라이더에 다양한 스타일과 기능을 추가하여 웹사이트의 사용자 경험을 향상시킬 수 있습니다.

참고 자료: