图片画廊

图片画廊把多张相关图片组织成独立帧。读者一次查看一张，并通过左右切换浏览整组内容。

适合用在

• 连续插画或摄影图集
• 分步骤说明图
• 同一对象的多个角度
• 每张图片都需要独立题注的内容组

推荐写法

<div class="reeden-image-gallery">
  <div class="reeden-image-gallery-cell">
    <img src="../Images/frame-1.jpg" alt="第一帧" />
    <p class="reeden-image-main-title">第一帧</p>
    <p class="reeden-image-subtitle">第一帧说明</p>
  </div>

  <div class="reeden-image-gallery-cell">
    <img src="../Images/frame-2.jpg" alt="第二帧" />
    <p class="reeden-image-main-title">第二帧</p>
  </div>
</div>

结构要求

• 画廊外层使用 reeden-image-gallery。
• 每个直接子项使用 reeden-image-gallery-cell，代表一帧。
• 每一帧至少包含一张能够正常加载的图片。
• 主标题和副标题都可以省略，但必须放在所属画廊帧内。
• 各帧最好使用相近的尺寸或宽高比，减少切换时的视觉跳动。

图片缺失或加载失败的 cell 会被跳过；如果所有帧都无效，Reeden 不会生成画廊。每个 cell 建议只放一张图片。

常见问题

画廊为空或缺少某一帧

确认 reeden-image-gallery-cell 是画廊的直接子元素，并且该帧中存在有效图片。

标题与图片配错

把每张图片及其标题都放在同一个 cell 内，不要把多个帧的标题集中写在画廊外层。

兼容写法

相关文档

• 交互单图
• 扩展音频
• 扩展全集