이로울 | 포트폴리오

Button Input Textarea Checkbox Radio Badge Select Toast Alert Modal Feedback RichTextEditor SideListMenu Pagination Calendar ApiHealthBadge TechBadge ButtonLink Icons AppSwiper

AppSwiper

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

AppSwiper

Swiper 기반 래퍼입니다. AppSwiperSlide· AppSwiperSlideScene으로 슬라이드를 구성하고, pagination, navigation, marquee, showAutoplayProgress 등 props로 패턴을 바꿀 수 있습니다. 고급 설정은 swiperOptions로 Swiper 옵션을 병합합니다 (onSwiper 등 일부는 내부에서 먼저 호출 후 연결).

기본 · bullets · loop · autoplay

pagination="bullets", paginationClickable 기본 true

Source Code

<AppSwiper loop autoplay pagination="bullets">
  <AppSwiperSlide>...</AppSwiperSlide>
</AppSwiper>

장면 A기본 슬라이드·불릿 페이지네이션

장면 Bloop + autoplay

장면 C커스텀 네비게이션 조합 가능

장면 Dprogressbar / marquee 등 props로 전환

Live Preview

페이드 · fraction 페이지네이션

effect="fade", pagination="fraction" (현재/전체)

Source Code

<AppSwiper effect="fade" loop autoplay pagination="fraction" />

장면 A

기본 슬라이드·불릿 페이지네이션

장면 B

loop + autoplay

장면 C

커스텀 네비게이션 조합 가능

장면 D

progressbar / marquee 등 props로 전환

Live Preview

Progressbar 페이지네이션

pagination="progressbar" — 상단 진행 막대

Source Code

<AppSwiper loop autoplay pagination="progressbar" />

장면 A

장면 B

장면 C

장면 D

Live Preview

내장 navigation (builtin)

navigation="builtin" — 좌우 화살표 버튼

Source Code

<AppSwiper navigation="builtin" loop pagination={false} />

장면 A

장면 B

장면 C

장면 D

Live Preview

커스텀 이전/다음 (navigation 렌더 prop)

navigation={(ctx) => …} — slidePrev / slideNext / slideTo / activeIndex / isBeginning / isEnd

Source Code

navigation={(ctx) => (
  <div className="flex gap-2">
    <Button onClick={() => ctx.slidePrev()} disabled={ctx.isBeginning}>이전</Button>
    <Button onClick={() => ctx.slideNext()} disabled={ctx.isEnd}>다음</Button>
  </div>
)}

장면 A

장면 B

장면 C

장면 D

Live Preview

Autoplay 진행 막대 (showAutoplayProgress)

onAutoplayTimeLeft 기반으로 하단 얇은 progress 표시

Source Code

<AppSwiper autoplay showAutoplayProgress pagination="bullets" />

장면 A

장면 B

장면 C

장면 D

Live Preview

Marquee (연속 롤링)

marquee prop — slidesPerView auto, loop, 빠른 autoplay 전환

Source Code

<AppSwiper marquee autoplay>
  <AppSwiperSlide className="!w-56">...</AppSwiperSlide>
</AppSwiper>

장면 A

장면 B

장면 C

장면 D

장면 A

장면 B

장면 C

장면 D

Live Preview

AppSwiperSlideScene

제목·설명·본문이 있는 카드형 장면 레이아웃

Source Code

<AppSwiperSlideScene title="타이틀" description="설명">콘텐츠</AppSwiperSlideScene>

소개

Scene 프리셋으로 히어로·온보딩 카드 등에 활용할 수 있습니다.

본문 영역에 폼·이미지·CTA를 넣습니다.

기술 스택

로고 그리드나 리스트를 배치합니다.

Next.jsTypeScriptTailwind

마무리

다음 단계 안내

Live Preview