웹사이트에서 포트폴리오 슬라이더를 구현할 때, 드래그 앤 드롭 효과를 사용하면 사용자들이 원하는 이미지나 콘텐츠를 직접 선택할 수 있는 편리한 기능을 제공할 수 있습니다. 이번 글에서는 JavaScript를 사용하여 드래그 앤 드롭 효과를 구현하는 방법에 대해 알아보겠습니다.

필요한 라이브러리 준비하기

드래그 앤 드롭 효과를 구현하기 위해서는 draggable 속성을 사용할 수 있는 HTML5 API를 이용하거나, 라이브러리를 사용할 수 있습니다. 라이브러리를 사용하는 방법을 알아보도록 하겠습니다. 이 예제에서는 Draggabilly 라이브러리를 사용하도록 하겠습니다.

먼저, HTML 파일에 Draggabilly 라이브러리를 포함시키기 위해 아래와 같은 태그를 추가해줍니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/2.3.0/draggabilly.pkgd.min.js"></script>

슬라이더 구현하기

HTML 구조

슬라이더를 구현하기 위해 우선 HTML 파일에 다음과 같은 기본 구조를 작성해줍니다:

<div class="slider">
  <div class="slide">
    <!-- 슬라이드 내용 -->
  </div>
  <div class="slide">
    <!-- 슬라이드 내용 -->
  </div>
  <div class="slide">
    <!-- 슬라이드 내용 -->
  </div>
  <!-- 추가적인 슬라이드들 -->
</div>

CSS 스타일링

슬라이더를 보다 시각적으로 표현하기 위해 CSS 스타일을 추가해줍니다. 기본적인 스타일링은 아래와 같이 할 수 있습니다:

.slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

/* 추가적인 슬라이드 스타일링 및 애니메이션 효과 */

JavaScript 추가

이제 Draggabilly 라이브러리를 사용하여 슬라이드를 드래그할 수 있도록 JavaScript 코드를 추가합니다:

document.addEventListener("DOMContentLoaded", function() {
  // 슬라이더 요소 선택
  var sliderContainer = document.querySelector(".slider");
  
  // 슬라이드 요소들 선택
  var slides = sliderContainer.querySelectorAll(".slide");
  
  // 슬라이드 개수 확인
  var slideCount = slides.length;
  
  // 슬라이드 너비 설정
  var slideWidth = sliderContainer.offsetWidth;
  
  // 슬라이더 전체 너비 설정
  var sliderWidth = slideCount * slideWidth;
  sliderContainer.style.width = sliderWidth + "px";
  
  // 각 슬라이드의 너비 설정
  Array.prototype.forEach.call(slides, function(slide) {
    slide.style.width = slideWidth + "px";
  });
  
  // Draggabilly 객체 생성
  var draggable = new Draggabilly(sliderContainer, {
    axis: "x" // 수평 방향으로만 드래그 가능하도록 설정
  });
});

이렇게 Draggabilly 객체를 생성하고 슬라이더에 드래그 기능을 추가한 후, 추가적인 애니메이션 효과나 이벤트 처리 등을 구현할 수 있습니다.

결론

이렇게 JavaScript와 Draggabilly 라이브러리를 사용하여 드래그 앤 드롭 효과를 구현하는 방법을 알아보았습니다. 이를 활용하여 웹사이트에 독특하고 사용자 친화적인 포트폴리오 슬라이더를 구현해보세요.

참고 자료:

• Draggabilly GitHub 페이지