Official Guide

tw-slide

Tailwind CSS 기반 프레젠테이션 라이브러리
사용 가이드

~4.5KB gzip · Zero Dependencies · TypeScript

Space 또는 → 로 넘기세요

Step 1

설치

npm 또는 CDN, 원하는 방식으로

npm

terminal

npm install tw-slide

CDN (설치 없이 바로 사용)

index.html

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/tw-slide/dist/tw-slide.css" />

<script src="https://cdn.jsdelivr.net/npm/tw-slide/dist/tailslide.umd.js"></script>

Step 2

기본 구조

HTML 3개 태그만 기억하세요

index.html

<!-- 1. 덱 컨테이너 -->
<div class="ts-deck ts-dark">

  <!-- 2. 슬라이드 -->
  <section class="ts-slide">
    <!-- 3. 콘텐츠 -->
    <div class="ts-content">
      <h1 class="text-5xl font-bold">
        첫 번째 슬라이드
      </h1>
    </div>
  </section>

  <section class="ts-slide">
    <div class="ts-content">
      <h1>두 번째 슬라이드</h1>
    </div>
  </section>

</div>

.ts-deck

전체 프레젠테이션 컨테이너. .ts-dark으로 다크모드 전환.

.ts-slide

각각의 슬라이드. <section> 태그 사용을 권장.

.ts-content

콘텐츠 영역. max-width 제한으로 가독성 확보. 선택사항.

Step 3

초기화

JavaScript 한 줄이면 시작

ES Module (npm)

main.js

import TailSlide from 'tw-slide';
import 'tw-slide/style.css';

const deck = new TailSlide({
  transition: 'slide',
  dark: true,
});

CDN (글로벌)

index.html

<script>
  const deck = new TailSlide.TailSlide({
    transition: 'slide',
    dark: true,
  });
</script>

Styling

Tailwind로 자유롭게

별도 테마 없이, 유틸리티 클래스로 모든 것을 표현

slide.html

<section class="ts-slide">
  <div class="ts-content text-center">

    <h1 class="text-6xl font-bold
      bg-gradient-to-r from-blue-400
      to-purple-500 bg-clip-text
      text-transparent">
      그라디언트 타이틀
    </h1>

    <p class="text-xl text-gray-400
      mt-6 max-w-lg mx-auto">
      서브타이틀 텍스트
    </p>

  </div>
</section>

그라디언트

bg-gradient-to-r from-* to-*

레이아웃

grid grid-cols-2 gap-4, flex items-center

반응형

text-4xl md:text-6xl — 브레이크포인트 자유롭게

다크모드

.ts-dark 클래스 하나로 전환

Transitions

6가지 트랜지션

Web Animations API 기반, 60fps GPU 가속

none

즉시 전환

fade

크로스 디졸브

slide

좌우 슬라이드 (기본값)

zoom

확대/축소

flip

3D 카드 플립

cube

3D 큐브 회전

new TailSlide({
  transition: 'cube',
  transitionSpeed: 600,
});

Fragments

단계별 공개

슬라이드 안에서 요소를 하나씩 보여줍니다

사용법

<!-- 기본 (fade-in) -->
<p class="ts-fragment">
  첫 번째
</p>

<!-- 애니메이션 지정 -->
<p class="ts-fragment"
   data-ts-animation="fade-up">
  두 번째
</p>

<p class="ts-fragment"
   data-ts-animation="grow">
  세 번째
</p>

8가지 애니메이션

fade-in 페이드 (기본값)

fade-up 아래에서 위로

fade-left 오른쪽에서 왼쪽으로

grow 작은 크기에서 확대

highlight 하이라이트 강조

+ fade-down, fade-right, shrink

Plugins

플러그인

필요한 기능만 골라서 사용

ProgressPlugin

화면 상단에 얇은 진행률 바 표시

↑ 이 슬라이드 상단에서 확인하세요

8 / 12

SlideNumberPlugin

우측 하단에 현재/전체 슬라이드 번호

↘ 우측 하단에서 확인하세요

OverviewPlugin

O 키로 전체 슬라이드 그리드 보기

지금 눌러보세요!

import TailSlide, {
  ProgressPlugin,
  SlideNumberPlugin,
  OverviewPlugin,
} from 'tw-slide';

const deck = new TailSlide();
deck.use(new ProgressPlugin());
deck.use(new SlideNumberPlugin());
deck.use(new OverviewPlugin());

Config

전체 설정 옵션

모든 옵션에 기본값이 있어 생략 가능

config

new TailSlide({
  el: '.ts-deck',          // 컨테이너 선택자
  transition: 'slide',     // none | fade | slide | zoom | flip | cube
  transitionSpeed: 500,    // 전환 속도 (ms)
  easing: 'ease-in-out',  // CSS 이징 함수
  keyboard: true,          // 키보드 네비게이션
  touch: true,             // 터치 / 스와이프
  hash: true,              // URL 해시 동기화 (#/0, #/1, ...)
  dark: true,              // 다크 모드
  loop: false,             // 마지막 슬라이드 → 처음으로
  autoSlide: 0,            // 자동 넘김 (ms, 0 = 꺼짐)
  startSlide: 0,           // 시작 슬라이드 인덱스
});

Navigation

키보드 단축키

→ Space

End 마지막으로

O 오버뷰 모드

Esc 오버뷰 토글

모바일에서는 좌우 스와이프로 네비게이션

API

JavaScript API

프로그래밍으로 슬라이드를 제어

methods

deck.next();             // 다음
deck.prev();             // 이전
deck.goTo(3);            // 인덱스로 이동
deck.getState();         // 현재 상태
deck.getSlides();        // 슬라이드 배열
deck.toggleOverview();   // 오버뷰 토글
deck.destroy();          // 정리

events

deck.on('slide:changed', (e) => {
  console.log(e.from, '→', e.to);
});

deck.on('fragment:shown', (e) => {
  console.log('fragment', e.fragment);
});

deck.on('deck:ready', (e) => {
  console.log('total:', e.totalSlides);
});

Start Presenting.

HTML + Tailwind만으로
멋진 프레젠테이션을 만들어보세요.

npm install tw-slide

GitHub npm

MIT Licensed • TypeScript • Zero Dependencies