캐러셀(carousel)은 웹사이트에서 여러 이미지나 콘텐츠를 순환하며 보여주는 요소로, 사용자 경험을 향상시키는 데 도움이 됩니다. 이번 포스트에서는 자바스크립트를 사용하여 간단한 페이드 인/아웃 애니메이션을 적용한 캐러셀 요소를 만드는 방법을 살펴보겠습니다.

HTML 구조

먼저, 캐러셀을 위한 HTML 구조를 작성해야 합니다. 다음은 기본적인 캐러셀의 구조입니다.

<div class="carousel">
  <div class="slide active">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Slide 3">
  </div>
</div>

CSS 스타일링

이제 캐러셀의 스타일을 지정해야 합니다. 다음은 각 슬라이드가 화면에 표시되거나 사라질 때 사용되는 CSS 트랜지션 효과를 추가한 예시입니다.

.carousel {
  position: relative;
  overflow: hidden;
}
.carousel .slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.carousel .slide.active {
  opacity: 1;
}

자바스크립트 애니메이션

마지막으로, 자바스크립트를 사용하여 캐러셀을 제어하고 페이드 인/아웃 효과를 적용합니다.

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const slideCount = slides.length;

function showSlide(index) {
  slides.forEach((slide, idx) => {
    if (idx === index) {
      slide.classList.add('active');
    } else {
      slide.classList.remove('active');
    }
  });
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slideCount;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + slideCount) % slideCount;
  showSlide(currentSlide);
}

// 초기 슬라이드 표시
showSlide(currentSlide);

// 5초마다 다음 슬라이드 표시
setInterval(nextSlide, 5000);

이제 위의 코드를 사용하여 페이드 인/아웃 애니메이션을 적용한 캐러셀이 준비되었습니다. 원하는 경우 CSS와 자바스크립트 코드를 더 추가하여 사용자 정의할 수 있습니다.

캐러셀을 제어하기 위해 추가적인 버튼과 사용자 입력을 지원하도록 확장할 수도 있습니다. 이것은 캐러셀의 사용 목적과 디자인에 따라 다를 수 있습니다.

이러한 방법을 사용하여, 간단한 페이드 인/아웃 애니메이션을 적용한 캐러셀 요소를 만들고 웹사이트에 통합할 수 있습니다. 이를 통해 사용자들에게 동적이고 시각적으로 매력적인 경험을 제공할 수 있습니다.