Skip to main content

基于 Swiper 的图片 PPT 播放组件

· 3 min read
Kyle
Kyle
CTO of the Ph.D. Creative Station

这篇文章介绍一个适用于 Docusaurus / React 页面中的图片幻灯片组件。它的目标很朴素：用户只需要提供一组图片 URL，就能把它们当成 PPT 一页一页播放。

功能演示​

机械臂开机连接示意图

支持鼠标按钮、左右方向键与全屏播放

1 / 4
幻灯片 1
幻灯片 2
幻灯片 3
幻灯片 4

组件特点​

  • 仅需传入图片 URL 数组即可使用
  • 支持鼠标点击“上一页 / 下一页”按钮
  • 支持键盘左右方向键切换
  • 支持缩略图导航，快速跳到指定页
  • 支持一键进入 / 退出全屏播放
  • 在最后一页继续点击“下一页”时，会从第一页重新开始
  • 支持页码计数与分页圆点
  • 适合把一组教学图片作为手动播放的 PPT 展示

基本用法​

import ImagePptSwiper from './_components/ImagePptSwiper';

<ImagePptSwiper
  title="示例幻灯片"
  images={[
    'https://example.com/slide-1.jpg',
    'https://example.com/slide-2.jpg',
    'https://example.com/slide-3.jpg'
  ]}
/>

支持的图片数据格式​

除了纯字符串 URL 数组，也支持对象数组，以便补充 alt 和 caption：

<ImagePptSwiper
  images={[
    {
      src: 'https://example.com/slide-1.jpg',
      alt: '启动前连接显示器',
      caption: '先将 HDMI 线连接到显示器。'
    },
    {
      src: 'https://example.com/slide-2.jpg',
      alt: '连接机械臂',
      caption: '再将另一端连接到机械臂。'
    }
  ]}
/>

参数说明​

参数类型默认值说明
imagesArray<string | { src, alt?, caption? }>-必填，图片 URL 列表
titlestring-幻灯片标题
heightnumber | stringmin(70vh, 560px)幻灯片高度
aspectRatiostring16 / 9幻灯片宽高比
showPaginationbooleantrue是否显示分页圆点
showCounterbooleantrue是否显示当前页码
showThumbnailsbooleantrue是否显示缩略图导航
showFullscreenButtonbooleantrue是否显示全屏播放按钮
loopbooleantrue是否启用循环切换
classNamestring''自定义类名

交互说明​

  1. 鼠标点击底部按钮即可切换上一页 / 下一页
  2. 使用左右方向键也可以切换页面
  3. 点击缩略图可快速跳转到任意一页
  4. 点击“全屏播放”可进入沉浸式展示模式
  5. 在最后一页继续点击“下一页”时，会自动回到第一页继续播放
  6. 组件会显示当前页码，方便教学讲解时控制节奏

适合的场景​

  • 教学步骤图逐页展示
  • 软件操作流程演示
  • 设备连接示意图播放
  • 将一组静态图片当成轻量级 PPT 使用

小结​

这个组件并不是要取代专业演示软件，而是为了在 Docusaurus 文档或博客页面里，提供一种更自然的“图片逐页讲解”体验。轻量、直接、够用——很适合课程文档场景。