A handful of full-bleed slides, one big idea each — for summarizing a whole topic at a glance.
This is a copyable exemplar. To use it in a lesson, lift the <section id="deck"> block below into a page built from assets/lesson-template.html and keep the design tokens intact.
Reach for a slide deck when you want someone to grasp the shape of a whole topic in two minutes, before they dive into the detail. Each slide carries exactly one idea in large type, so the reader is never asked to juggle two thoughts at once. They click through — or tap an arrow key — and the story builds one beat at a time.
Think of it like… flashcards held up one at a time. You don't read a wall of text; you watch a single idea appear, let it land, then turn to the next card. The progress bar is the thickness of the stack shrinking in your hand.
Slides are absolutely-positioned siblings stacked in one .deck-stage; only the one with .current is visible and focusable. Navigation is a single go(index) function clamped to [0, n-1] that swaps the current class, updates the counter, fills the progress bar to (index+1)/n, syncs the dot rail's aria-current, and disables the Prev/Next buttons at the ends.
A keydown listener maps ArrowRight/ArrowLeft (plus Home/End) to go(). Controls are real <button> elements; the stage is an aria-roledescription="carousel" region with aria-live="polite" so a screen reader announces each slide change. Motion respects prefers-reduced-motion.
// the whole engine — one clamp, one render function go(i) { idx = Math.max(0, Math.min(i, slides.length - 1)); render(); // toggle .current, fill bar, sync dots + counter } addEventListener('keydown', e => { if (e.key === 'ArrowRight') go(idx + 1); if (e.key === 'ArrowLeft') go(idx - 1); });
Click Next / Back, tap a dot, or use the left/right arrow keys. The bar at the top shows how far through you are.