html-effectiveness-slides

06-slides — 键盘控制幻灯片

"A handful of <section> tags and twenty lines of JS is a slide deck. Point the agent at a Slack thread or a design doc and get something you can arrow-key through in a meeting — no Keynote, no export step."

何时用

用户说	该走这里吗
"做几张 slides 给团队讲讲"	✓
"把这份 RFC 讲一下，slide 形式"	✓
"上台分享 5 页内容"	✓
"做一份幻灯片用键盘翻"	✓
"做一份正式 deck 给 board / 投资人"	✗ 走专业工具 (Keynote)，HTML deck 太朴素
"做一份 PDF"	✗ 不是这个 skill 的范畴

---

标准结构（6 张以内最好）

#	类型	干什么
1	Title	一句标题 + 一句副标题（讲什么、要做什么决定）
2	"Three things shipped"	3 列等宽卡片，并行展示
3	In progress	工作流 + 完成度百分比
4	Metrics	大数字 + delta（2-4 个）
5	Decision needed	决定的问题 + 两个 options
6	Next & closer	下周计划 + "Questions →"

3-7 张是甜区。≤ 2 张走 markdown，≥ 8 张观众睡着。

---

键盘交互（必备）

键	行为
→ Space PageDown	下一张
← PageUp	上一张
. Home	回到第一张
f	全屏切换

底部右下角显示 n / total 页码，左下角显示 keyboard hint。

---

关键 JS（直接复用）

const slides = document.querySelectorAll('.slide');
const pager = document.querySelector('.pager');
let i = 0;

function show(n) {
  i = Math.max(0, Math.min(slides.length - 1, n));
  slides.forEach((s, k) => s.classList.toggle('active', k === i));
  pager.textContent = (i + 1) + ' / ' + slides.length;
}

window.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
    e.preventDefault(); show(i + 1);
  }
  if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
    e.preventDefault(); show(i - 1);
  }
  if (e.key === '.' || e.key === 'Home') show(0);
  if (e.key === 'f') {
    if (!document.fullscreenElement) document.documentElement.requestFullscreen();
    else document.exitFullscreen();
  }
});
show(0);

---

关键 CSS

.deck { width: 100vw; height: 100vh; overflow: hidden; }
.slide { display: none; min-height: 100vh; padding: 80px 100px;
         flex-direction: column; gap: 24px; }
.slide.active { display: flex; }

.slide h1 { font-size: 56px; font-weight: 500; line-height: 1.1;
            letter-spacing: -0.015em; max-width: 14ch; }
.slide h2 { font-size: 36px; font-weight: 500; line-height: 1.2; }
.slide p  { font-size: 22px; line-height: 1.55; color: var(--gray-700);
            max-width: 60ch; }

.pager { position: fixed; bottom: 24px; right: 32px;
         color: var(--gray-500); font-family: var(--font-mono);
         font-size: 14px; user-select: none; }
.help { position: fixed; bottom: 24px; left: 32px;
        color: var(--gray-500); font-size: 13px; }