본문 바로가기
카테고리 없음

캐러셀

by riversun1 2024. 7. 9.

 

캐러셀을 들어만 봤지, 한 번도 만들어본 적이 없었는데 이번 기회에 배워본다!

 

캐러셀(Carousel)은 웹 디자인과 사용자 인터페이스(UI) 디자인에서 흔히 사용되는 구성 요소 중 하나다. 캐러셀은 여러 콘텐츠 아이템(이미지, 텍스트, 카드 등)을 순서대로 표시하며, 사용자가 이전 또는 다음 버튼을 클릭하거나 자동으로 아이템이 순환되도록 하는 방식으로 작동한다. 캐러셀은 종종 이미지 슬라이더(Image Slider)라고도 불린다.

 

캐러셀의 주요 특징

  1. 연속적인 순환: 캐러셀은 콘텐츠 아이템이 끝없이 순환되도록 설계된다. 사용자가 마지막 아이템에 도달하면, 다시 첫 번째 아이템으로 넘어간다.
  2. 내비게이션 버튼: 사용자는 일반적으로 이전 또는 다음 버튼을 클릭하여 원하는 아이템으로 이동할 수 있다.
  3. 자동 재생: 많은 캐러셀은 일정한 시간 간격으로 자동으로 다음 아이템으로 이동한다. 사용자는 자동 재생을 멈추거나 다시 시작할 수도 있다.
  4. 인디케이터: 현재 표시되고 있는 아이템을 나타내는 점 또는 숫자 인디케이터가 제공되어 사용자가 전체 콘텐츠의 위치를 쉽게 파악할 수 있게 한다.
  5. 반응형 디자인: 캐러셀은 다양한 화면 크기와 장치에 대응할 수 있도록 반응형으로 디자인된다.

 

캐러셀의 장점

  • 시각적 매력: 이미지를 포함한 다양한 콘텐츠를 시각적으로 매력적으로 표시할 수 있다.
  • 공간 절약: 많은 콘텐츠를 작은 공간에 담아낼 수 있어 페이지 레이아웃을 깔끔하게 유지할 수 있다.
  • 사용자 참여: 인터랙티브한 요소로 사용자 참여를 유도할 수 있다.

 

캐러셀의 단점

  • 로드 시간: 많은 이미지 또는 콘텐츠를 포함할 경우 페이지 로드 시간이 길어질 수 있다.
  • 접근성: 모든 사용자가 캐러셀을 쉽게 사용할 수 있도록 접근성을 고려한 설계가 필요하다.
  • 주의 분산: 잘못 설계된 캐러셀은 사용자 주의를 분산시킬 수 있다.

캐러셀은 주로 웹사이트의 홈페이지, 갤러리, 제품 페이지, 뉴스 사이트 등에서 자주 사용되며, 콘텐츠를 시각적으로 강조하고 다양한 정보를 제공하는 데 유용하다.

 

"use client";

import Image from "next/image";
import { useEffect, useState } from "react";

const Carousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const images = [
    "https://via.placeholder.com/900x200/FF0000/FFFFFF?text=Slide+1",
    "https://via.placeholder.com/900x200/00FF00/FFFFFF?text=Slide+2",
    "https://via.placeholder.com/900x200/0000FF/FFFFFF?text=Slide+3",
  ];

  // 다음 슬라이드로 이동
  const goToNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  // 이전 슬라이드로 이동
  const goToPrevious = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    );
  };

  useEffect(() => {
    const interval = setInterval(goToNext, 3000); // 3초마다 다음 슬라이드로 이동
    return () => clearInterval(interval); // 컴포넌트 언마운트 시 인터벌 정리
  }, []);

  return (
    <div>
      <button onClick={goToPrevious}>Previous</button>
      <div className="container mx-auto max-w-[1024px] px-5 flex justify-center items-center">
        <Image
          src={images[currentIndex]}
          alt={`Slide ${currentIndex + 1}`}
          width={900}
          height={200}
        />
      </div>
      <button onClick={goToNext}>Next</button>
    </div>
  );
};

export default Carousel;

 

 

 

goToNext 함수

// 다음 슬라이드로 이동
const goToNext = () => {
  setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
};

 

이 함수는 우리가 슬라이드를 "다음"으로 넘길 때 사용한다

  1. prevIndex는 현재 슬라이드의 위치(숫자)를 나타낸다
  2. prevIndex + 1은 다음 슬라이드로 이동하기 위해 현재 위치에 1을 더한 값이다
  3. % images.length는 슬라이드가 마지막에 도달했을 때 다시 처음으로 돌아가도록 도와준다. 예를 들어, 3개의 슬라이드가 있다면:
    • 현재 슬라이드가 2번째(숫자로 1)일 때, 1 + 1 = 2가 되고, 이는 3번째 슬라이드이다
    • 현재 슬라이드가 3번째(숫자로 2)일 때, 2 + 1 = 3이 되지만, 슬라이드는 0, 1, 2로 이루어져 있으므로 3 % 3 = 0이 되어 첫 번째 슬라이드로 돌아간다.

 

goToPrevious 함수

// 이전 슬라이드로 이동
const goToPrevious = () => {
  setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
};

 

이 함수는 우리가 슬라이드를 "이전"으로 넘길 때 사용된다.

  1. prevIndex는 현재 슬라이드의 위치(숫자)를 나타낸다.
  2. prevIndex - 1은 이전 슬라이드로 이동하기 위해 현재 위치에서 1을 뺀 값이다.
  3. + images.length는 만약 현재 슬라이드가 첫 번째 슬라이드라면(숫자로 0), 0 - 1이 -1이 되어 마지막 슬라이드로 돌아가도록 도와준다.
  4. % images.length는 슬라이드가 첫 번째에서 다시 마지막으로 돌아가도록 도와준다. 예를 들어, 3개의 슬라이드가 있다면:
    • 현재 슬라이드가 1번째(숫자로 0)일 때, 0 - 1 = -1이 되고, -1 + 3 = 2가 되어 마지막 슬라이드로 돌아간다.
    • 현재 슬라이드가 2번째(숫자로 1)일 때, 1 - 1 = 0이 되어 첫 번째 슬라이드로 돌아간다.

이렇게 함으로써 슬라이드를 왼쪽과 오른쪽으로 무한히 넘길 수 있게 된다.

 

 

 

goToNext 함수

  1. 현재 슬라이드가 첫 번째 이미지(인덱스 0)일 때:
    • prevIndex는 0이다.
    • (prevIndex + 1) % images.length는 (0 + 1) % 3이고 결과는 1입니다. 두 번째 이미지로 넘어간다.
  2. 현재 슬라이드가 두 번째 이미지(인덱스 1)일 때:
    • prevIndex는 1이다.
    • (prevIndex + 1) % images.length는 (1 + 1) % 3이고 결과는 2입니다. 세 번째 이미지로 넘어간다.
  3. 현재 슬라이드가 세 번째 이미지(인덱스 2)일 때:
    • prevIndex는 2이다.
    • (prevIndex + 1) % images.length는 (2 + 1) % 3이고 결과는 0입니다. 첫 번째 이미지로 다시 돌아간다.

goToPrevious 함수

  1. 현재 슬라이드가 첫 번째 이미지(인덱스 0)일 때:
    • prevIndex는 0이다.
    • (prevIndex - 1 + images.length) % images.length는 (0 - 1 + 3) % 3이고 결과는 2입니다. 세 번째 이미지로 넘어간다.
  2. 현재 슬라이드가 세 번째 이미지(인덱스 2)일 때:
    • prevIndex는 2이다.
    • (prevIndex - 1 + images.length) % images.length는 (2 - 1 + 3) % 3이고 결과는 1입니다. 두 번째 이미지로 넘어간다.
  3. 현재 슬라이드가 두 번째 이미지(인덱스 1)일 때:
    • prevIndex는 1이다.
    • (prevIndex - 1 + images.length) % images.length는 (1 - 1 + 3) % 3이고 결과는 0입니다. 첫 번째 이미지로 넘어간다.

이렇게 하면 슬라이드 쇼가 처음과 끝 사이를 순환할 수 있습니다. % images.length는 인덱스가 이미지 배열의 범위를 벗어날 때 다시 처음으로 돌아가도록 만들어다.

티스토리툴바