图像滑块 (Image Slider)
图像滑块（Image Slider）用于以滑动轮播的方式展示一组图片，支持标题与说明、分页圆点与箭头导航。学习者可在同一位置按顺序查看多张图片，适合步骤演示（流程/实验/操作）、对比展示（前后对比/版本变化）、作品与案例集锦等场景。编辑时可为每张图片设置替代文本（alt）与说明，提升可访问性；建议合理压缩与统一尺寸，确保加载速度与课堂展示的稳定性。
本教程目标
- 了解图像滑块的适用场景与优势
- 学习在编辑器中添加与管理图片
- 正确编写每张图片的替代文本（Alt Text）以保障无障碍
- 保存并预览滑块效果，确认展示质量
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像滑块 (Image Slider)』开始创作。
何时使用图像滑块
图像滑块适用于需要在有限空间内展示多张图片的场景：
- 连续讲述一个故事或流程（如制作步骤、项目进展）
- 展示“前后对比”或多个版本的内容
- 图片库/相册、产品展示、活动回顾等视觉内容汇总
- 在同一位置承载多张图片，避免页面过长
教程示例
我们将创建一个主题为「垃圾分类与回收」的图像滑块，共包含 7 张图片，用于展示不同类型的可回收物品的图片及说明。
不同类型的可回收物品
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击“编辑”
- 即可查看并操作本教程所示的设置。
创建图像滑块：分步指南
步骤 1：创建新内容
- 在课灵工作区点击「创建」，进入 H5P 编辑器
- 在内容类型列表中选择 『图像滑块（Image Slider）』 或搜索
Image Slider - 进入编辑界面开始配置
从 H5P 内容类型列表中选择『图像滑块』
步骤 2：设置标题
在 『标题』 字段中输入：垃圾分类与回收
该标题将在内容列表与统计中使用，可帮助后续检索与管理。
步骤 3：添加图像
在编辑器的 『图片』 区域：
- 点击 『添加』 上传第一张图片
- 在 『替代文字』 中简要描述该图片，例如：
硬纸板 - 保存该条目后，列表中会出现第一张图片
添加硬纸板图片
注意
替代文本会在图片无法加载或由读屏软件朗读时使用，是提升无障碍体验的关键。
步骤 4：添加更多图片
- 点击 『添加项』 来添加下一张图片
- 重复上传与填写替代文本的流程，直至完成所有图片添加
完成后，您应在 『图片』 区域看到 7 个条目。
步骤 5：其他设置（可选）
- 图像滑块主要围绕图片条目进行配置，编辑器会根据图片选择适配显示比例
- 读者可使用左右导航箭头浏览图片，通常无需额外设置
- 可使用全屏模式以更沉浸地浏览图片（依赖宿主系统/主题支持）
步骤 6：保存与预览
点击 『保存并关闭』 生成内容。您现在应该得到一个与本教程顶部示例描述一致的图像滑块。
请检查每张图片的替代文本是否准确、是否需要替换为更清晰的图片资源。
专家提示：用例灵感与相关内容类型推荐
想拓展『图像滑块』的使用场景？以下是一些常见用例，帮助你打开创作思路：
- 步骤演示与流程说明：多图依次呈现每一步骤，配合简短标题与说明文字，提升可读性
- 前后对比与版本迭代：按时间或版本顺序展示变化轨迹，适合产品迭代、修复过程、项目进展
- 产品/作品集锦：将一组图片集中在同一位置浏览，适合课程作业展示、作品墙精简版
- 活动/事件回顾：按时间线或主题分组展示活动照片，便于课堂讲解或企业培训回顾
- 小型图文讲解：在不扩展页面长度的前提下组织多图内容，减少滚动与认知负担
如何根据目标选择更合适的内容类型
- 如果需要“直接对比两张图片的差异”（前后/旧新/修复前后），使用『图像并置（Image Juxtaposition）』更直观，支持拖动滑杆在同一画面比较两张图。
- 如果希望“同时展示多张图片并形成拼贴布局”（作品墙/海报式集合/多图并列），选择『图片拼贴（Collage）』以获得自由组合与并列排布。
- 若需在“单张图片上标注多个可点击信息点”，考虑『图像热点（Image Hotspots）』来进行局部说明与交互标注。
- 当需要“讲解+多组件整合+评测”，可在『课程演示（Course Presentation）』或『互动书（Interactive Book）』中嵌入图像滑块与测验组件，形成完整学习路径。