1. Carousel

Carousel 컴포넌트는 여러 이미지를 슬라이드 방식으로 보여주는 기능을 제공합니다. 사용자는 이전, 다음 버튼을 사용해 이미지를 전환할 수 있습니다.

1.1. Import

import Carousel from '@components/Carousel';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import Carousel from '@components/Carousel';

function Example() {
  return <Carousel images={["images/image1.svg", "images/image2.svg", "images/image3.svg"]} />;
}

export default Example;

1.3. Customization

Carousel 컴포넌트는 다양한 이미지 배열을 제공하며, 필요에 따라 슬라이드 전환을 위한 추가 설정을 쉽게 변경할 수 있습니다.

import Carousel from '@components/Carousel';

function Example() {
  return (
    <Carousel 
      images={["images/image1.svg", "images/image2.svg", "images/image3.svg", "images/image4.svg"]} 
    />
  );
}

export default Example;

1.4. Props

Carousel 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`images`	슬라이드에 표시될 이미지 경로들의 배열을 설정합니다.	`string[]`	`[]`

1.5. Full Example

import Carousel from '@components/Carousel';

function Example() {
  return (
    <div>
      <Carousel 
        images={["images/image1.svg", "images/image2.svg", "images/image3.svg", "images/image4.svg"]} 
      />
    </div>
  );
}

export default Example;

2. CarouselAutoplay

CarouselAutoplay 컴포넌트는 여러 이미지를 슬라이드 방식으로 자동 재생 기능과 함께 보여줍니다. 사용자는 이전, 다음 버튼을 사용해 이미지를 수동으로 전환할 수 있으며, 자동 재생 기능도 포함되어 있습니다.

2.1. Import

import CarouselAutoplay from '@components/CarouselAutoplay';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

import CarouselAutoplay from '@components/CarouselAutoplay';

function Example() {
  return (
    <CarouselAutoplay 
      images={["images/image1.svg", "images/image2.svg", "images/image3.svg"]} 
    />
  );
}

export default Example;

2.3. Customization

CarouselAutoplay 컴포넌트는 자동 재생 기능과 슬라이드 전환 간격을 조정할 수 있습니다. 사용자는 autoplay와 interval props를 통해 이 기능을 제어할 수 있습니다.

import CarouselAutoplay from '@components/CarouselAutoplay';

function Example() {
  return (
    <CarouselAutoplay 
      images={["images/image1.svg", "images/image2.svg", "images/image3.svg", "images/image4.svg"]}
      autoplay={true}
      interval={3000} 
    />
  );
}

export default Example;

2.4. Props

CarouselAutoplay 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`images`	슬라이드에 표시될 이미지 경로들의 배열을 설정합니다.	`string[]`	`[]`
`autoplay`	자동 재생 기능을 활성화할지 여부를 설정합니다.	`boolean`	`false`
`interval`	슬라이드 전환 간격(밀리초)을 설정합니다.	`number`	`2000`

2.5. Full Example

import CarouselAutoplay from '@components/CarouselAutoplay';

function Example() {
  return (
    <div>
      <CarouselAutoplay 
        images={["images/image1.svg", "images/image2.svg", "images/image3.svg", "images/image4.svg"]} 
        autoplay={true}
        interval={3000} 
      />
    </div>
  );
}

export default Example;

3. CarouselDots

CarouselDots 컴포넌트는 이미지 슬라이드 기능을 제공하며, 하단에 페이지네이션을 위한 점(dot)을 표시할 수 있습니다. 사용자는 이전, 다음 버튼을 통해 슬라이드를 전환할 수 있으며, 자동 재생 기능도 제공합니다.

3.1. Import

import CarouselDots from '@components/CarouselDots';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

import CarouselDots from '@components/CarouselDots';

function Example() {
  return (
    <CarouselDots
      images={["images/image1.svg", "images/image2.svg", "images/image3.svg"]}
    />
  );
}

export default Example;

3.3. Customization

CarouselDots 컴포넌트는 자동 재생, 슬라이드 간격 조정 등 다양한 설정을 지원합니다. 필요에 따라 이러한 옵션들을 커스터마이즈할 수 있습니다.

import CarouselDots from '@components/CarouselDots';

function Example() {
  return (
    <CarouselDots
      images={[
        "images/image1.svg",
        "images/image2.svg",
        "images/image3.svg",
        "images/image4.svg",
      ]}
      autoplay={true}
      interval={3000}
    />
  );
}

export default Example;

3.4. Props

CarouselDots 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`images`	슬라이드에 표시될 이미지 경로들의 배열을 설정합니다.	`string[]`	`[]`
`showDots`	하단에 슬라이드 점(dot)을 표시할지 여부를 설정합니다.	`boolean`	`true`
`autoplay`	슬라이드의 자동 전환 여부를 설정합니다.	`boolean`	`false`
`interval`	자동 전환 시 슬라이드 간격을 밀리초 단위로 설정합니다.	`number`	`2000`

3.5. Full Example

import CarouselDots from '@components/CarouselDots';

function Example() {
  return (
    <div>
      <CarouselDots
        images={[
          "images/image1.svg",
          "images/image2.svg",
          "images/image3.svg",
          "images/image4.svg",
        ]}
        autoplay={true}
        interval={3000}
      />
    </div>
  );
}

export default Example;