캐러셀(carousel)은 웹 페이지에서 사진이나 콘텐츠를 순환적으로 표시하는 기능을 말합니다. 이번에는 자바스크립트에서 Ternary 연산자를 활용하여 간단한 캐러셀을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조

먼저, 캐러셀을 구현하기 위해 HTML 구조를 준비해야 합니다. 예시로 다음과 같은 간단한 구조를 사용하겠습니다.

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

CSS 스타일링

다음으로, 캐러셀의 스타일을 설정해야 합니다. 이 예시에서는 다음과 같은 CSS 코드를 사용하겠습니다.

.carousel {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

자바스크립트 구현

이제 자바스크립트를 사용하여 캐러셀을 구현해 보겠습니다. Ternary 연산자는 조건문을 간단하게 표현하는데 도움을 주는 연산자입니다.

const carousel = document.querySelector('.carousel');
const images = carousel.getElementsByTagName('img');
const totalImages = images.length;

let currentIndex = 0;

setInterval(() => {
  images[currentIndex].style.transform = 'translateX(-100%)';

  currentIndex = (currentIndex + 1) % totalImages;

  images[currentIndex].style.transform = 'translateX(0)';
}, 2000);

위의 코드는 setInterval 함수를 사용하여 일정 시간 간격마다 이미지를 순환시킵니다. currentIndex 변수를 사용하여 현재 이미지의 인덱스를 추적하고, Ternary 연산자를 사용하여 이미지의 위치를 변경하고 다음 이미지를 표시합니다.

실행 확인

위의 코드를 HTML 파일에 추가하고 브라우저에서 실행해보면 자동으로 이미지가 순환되는 캐러셀을 확인할 수 있습니다.

Ternary 연산자를 활용하여 자바스크립트 캐러셀을 구현하는 방법에 대해 알아보았습니다. 이를 응용하여 세부적인 설정이나 다양한 애니메이션 효과를 추가할 수 있습니다. 자세한 내용은 MDN 문서를 참고해주세요.

#javascript #carousel