tw-slide Tailwind Presentation Library Demo

Download Back To CSSScript.Com

A Tailwind presentation library for HTML slide decks with transitions, fragments, deep links, and plugin-based navigation.

6transition modes with directional behavior
8fragment animations with ordered reveal
3built-in plugins running on this page
Arrow keys move slides
O opens overview
Esc closes overview
Swipe works on touch devices

Core Capability Map

Engine behavior

  • Stateful deck modelSlides move through active, past, and future states so navigation and plugins stay synchronized.
  • Imperative APInext(), prev(), goTo(), toggleOverview(), and destroy() control the runtime directly.
  • Hash-aware navigationThe deck can restore slide position from the URL and update the hash as viewers move.
  • Loop and timer supportThe engine can cycle continuously or advance on a timed interval.

Input coverage

  • Keyboard controlsArrow keys, space, Home, End, N, P, O, and Esc are already wired by the library.
  • Optional click advanceA single toggle turns stage clicks into forward navigation.
  • Touch gesturesHorizontal swipes navigate on phones and tablets without extra setup.
  • Overview modeThumbnail view makes direct slide selection available during navigation.

Transitions

Every transition type is available here.

The dock on the right changes the live deck transition and rebuilds the instance with the selected configuration.

noneInstant cut for minimal motion.
fadeCross-fade between slides.
slideHorizontal movement with direction awareness.
zoomScale-based entry and exit.
flipCard-like 3D rotation.
cubePerspective rotation across the deck.

Fragments

Advance through ordered fragment reveals.

This slide uses every fragment animation defined by the repository.

fade-inOpacity reveal for text and simple elements.
fade-upSubtle lift for sequential emphasis.
fade-downTop-origin motion for labels and notes.
fade-leftRight-to-left reveal for side content.
fade-rightLeft-to-right reveal for mirrored layouts.
growScale-up emphasis for larger moments.
shrinkLarge-to-normal motion with more drama.
highlightBackground emphasis for a key point.

Plugins

Built-in plugins are running on this stage.

ProgressPlugin

The top edge progress bar responds to slide position and reflects deck completion.

SlideNumberPlugin

The bottom-right badge keeps the current slide number visible without extra markup.

OverviewPlugin

Press O or use the dock button to open the thumbnail grid and select slides directly.

Event listeners

The dock event log listens to deck, slide, fragment, and overview events in real time.

Configuration

Config options shown live

transitionChanges motion style across the deck.
transitionSpeedControls animation duration.
hashKeeps URL and slide state aligned.
clickToAdvanceEnables stage click navigation.
loopReturns to the first slide after the last.
autoSlideMoves forward on a timer.
const deck = new TailSlide.TailSlide({
  el: '#deck',
  transition: 'slide',
  transitionSpeed: 520,
  hash: true,
  touch: true,
  keyboard: true,
  clickToAdvance: false,
  autoSlide: 0,
  loop: false,
  dark: true
});

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

Vanilla JS Fit

This repository does work for Vanilla JS.

  • CDN-ready UMD buildThe published package exposes a browser global, so the demo can initialize with a plain script tag.
  • No framework dependencyThe runtime only needs HTML, CSS, and JavaScript to operate.
  • Important distinctionThe repository checkout itself contains TypeScript source, so the local source folder is not the direct browser entry point.
<script src="https://cdn.jsdelivr.net/npm/tw-slide/dist/tailslide.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-slide/dist/tw-slide.css">

const deck = new TailSlide.TailSlide({
  dark: true
});

Coverage Summary

Open the file and the demo is ready.

This page keeps the layout dark, English-only, and focused on the demo itself while covering the repository's runtime behavior, plugins, fragments, transitions, control surface, and browser-ready initialization path.

No buildCDN assets only
Dark modecustom copper and olive palette
Comprehensivefull feature coverage