Um punhado de slides em tela cheia, uma grande ideia em cada um — para resumir um tópico inteiro num relance.
Este é um exemplar copiável. Para usá-lo em uma lição, transponha o bloco <section id="deck"> abaixo para uma página construída a partir de assets/lesson-template.html e mantenha os tokens de design intactos.
Recorra a uma apresentação de slides quando você quer que alguém capte o formato de um tópico inteiro em dois minutos, antes de mergulhar no detalhe. Cada slide carrega exatamente uma ideia em tipografia grande, então o leitor nunca precisa equilibrar dois pensamentos ao mesmo tempo. Ele clica para avançar — ou toca uma tecla de seta — e a história se constrói um passo de cada vez.
Pense nisto como… cartões-relâmpago erguidos um de cada vez. Você não lê um paredão de texto; você vê uma única ideia aparecer, deixa-a assentar e então vira para o próximo cartão. A barra de progresso é a espessura da pilha diminuindo na sua mão.
Os slides são irmãos posicionados de forma absoluta, empilhados em um único .deck-stage; só aquele com .current fica visível e focável. A navegação é uma única função go(index) restringida a [0, n-1] que troca a classe atual, atualiza o contador, preenche a barra de progresso até (index+1)/n, sincroniza o aria-current da trilha de pontos e desabilita os botões Anterior/Próximo nas extremidades.
Um listener de keydown mapeia ArrowRight/ArrowLeft (além de Home/End) para go(). Os controles são elementos <button> de verdade; o palco é uma região aria-roledescription="carousel" com aria-live="polite" para que um leitor de tela anuncie cada mudança de slide. O movimento respeita 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); });
Clique em Próximo / Voltar, toque um ponto ou use as teclas de seta esquerda/direita. A barra no topo mostra o quanto você já avançou.