HTML5无原生幻灯片功能，需用Swiper等JS库或CSS动画实现；Swiper推荐用于响应式轮播，需严格HTML结构和DOM加载后初始化；纯CSS方案功能受限且无自动播放；禁用iframe嵌PPT。
HTML5 本身不提供幻灯片组件或切换特效，必须借助 JavaScript 库或 CSS 动画手动实现；直接写
用 Swiper 实现响应式幻灯片（推荐）
Swiper 是目前最稳定、移动端适配最好的轮播库，支持触摸拖拽、自动播放、分页器等完整功能。
- 引入 CDN：
（注意版本号，v11 起需用swiper-bundle） - HTML 结构必须严格符合 Swiper 要求：
- 初始化必须在 DOM 加载后执行，否则
new Swiper('.swiper')找不到元素；常见错误是脚本放在里且没加defer或事件监听 - 若页面有多个幻灯片，每个需独立 class 名（如
.swiper-1），不能共用同一选择器，否则配置会互相覆盖
CSS-only 幻灯片（无 JS，但功能受限）
纯 CSS 方案依赖 @keyframes + input[type="radio"] 或 :checked 控制，适合静态内容、低交互场景。
- 切换靠 radio 按钮触发：每个
对应一张幻灯片，用label[for="s1"]当按钮 - 幻灯片容器需设
overflow: hidden，子项用position: absolute叠放，再通过left或transform: translateX()控制显隐 - 无法自动播放，也不能滑动切换；CSS 动画只能做淡入淡出或位移，不支持惯性滚动或手势识别
- IE 不支持
:checked配合兄弟选择器控制远距离元素，实际兼容性仅限现代浏览器
避免用 iframe 嵌入 PPT（如 PowerPoint Online）
虽然能快速“嵌入”，但体验极差，不是真正意义上的 HTML5 幻灯片。
立即学习“前端免费学习笔记（深入）”；
-
iframe加载慢，PPT Online 需登录微软账号，未登录时显示空白或跳转登录页 - 移动端缩放错乱，手势操作常被 iframe 内部拦截，无法与页面滚动联动
- SEO 不友好，搜索引擎无法解析 iframe 内容；无障碍访问（a11y）支持基本为零
- 若必须用，至少加
loading="lazy"和固定宽高，防止布局偏移（CLS）
真正可控的 HTML5 幻灯片，核心不在“嵌入”而在“构建”——结构要语义化，切换逻辑要可维护，动画要兼顾性能（优先用 transform 和 opacity）。别为了省事把 PPT 文件扔进 iframe，也别幻想单靠 CSS 属性就能做出 Swiper 级别的交互体验。
