IMAGE & MEDIA
缩略图主导航幻灯片Thumbnail Carousel
上方主图区 + 下方一排可点击缩略图，点缩略图切换、当前缩略图高亮并自动居中。电商详情页的经典结构。
效果预览
常见变体
左侧竖排缩略图Vertical Thumbnail Rail
把横向轨道竖到主图左侧，像电商详情页或专业修图软件的布局；横向空间足够时识别效率更高。
移动端点状分页Dot Pager on Mobile
屏幕太窄放不下缩略图时，把下方轨道换成 8px 圆点，保留主图左右箭头，触控体验更干净。
适合用在哪
商品详情图、作品集展示、酒店/房源照片、产品截图库。
不适合：只有两三张图的场景：缩略图轨道会让页面显得比实际内容更多，点状或简单左右箭头就够了；缩略图本身需要能代表内容，如果是高度相似的细节特写，用户看不出区别，导航价值很低。
和相近模式的区别
画廊把所有缩略图平铺成网格，让用户自己决定点哪张，适合「浏览」阶段；缩略图主导航是同主题多图的线性切换，先给一张主图、再给一排入口，适合「详情」阶段，比如商品详情页。不要在一个详情页里同时用网格和缩略图轨道重复展示同一组图。
缩略图主导航负责快速切换当前页的主图；灯箱负责把当前主图放大到全屏查看细节。两者常成对出现：点主图打开灯箱，点轨道切换主图。灯箱本身不要再内嵌一个缩略图轨道，否则焦点层级会混乱。
容易踩的坑
- 缩略图与主图加载的是同一张大图，首屏一次性请求十几兆，移动端直接卡死。
- 当前缩略图不自动居中，用户切到第 8 张后看不到当前项在哪。
- 缩略图太小或间距太近，移动端手指容易误触相邻项。
设计提示词 · Prompt
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* 外层 .thumbcaro 放在 .s 舞台内 */
.thumbcaro { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--i-bg); border-radius: 12px; }
.thumbcaro__stage { height: 130px; border-radius: 10px; background: var(--i-gd); position: relative; }
.thumbcaro__thumbs { display: flex; gap: 8px; justify-content: center; }
.thumbcaro__thumbs span { width: 42px; height: 42px; border-radius: 6px; background: var(--i-bg3); cursor: pointer; transition: box-shadow .15s ease; }
.thumbcaro__thumbs span.is-on { box-shadow: 0 0 0 2px var(--i-br); background: var(--i-gd2); }
/* 左侧竖排 */
.thumbcaro--left { flex-direction: row; height: 180px; }
.thumbcaro--left .thumbcaro__stage { flex: 1; height: auto; }
.thumbcaro--left .thumbcaro__thumbs { flex-direction: column; width: 50px; }
/* 点状分页 */
.thumbcaro--dots .thumbcaro__stage { height: 150px; }
.thumbcaro__dots { display: flex; justify-content: center; gap: 6px; }
.thumbcaro__dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--i-line2); }
.thumbcaro__dots span.is-on { background: var(--i-br); }
@media (prefers-reduced-motion: reduce) {
.thumbcaro__thumbs span, .thumbcaro__dots span { transition: none; }
}
演示 HTML 结构
<div class="s d-thumbcaro">
<div class="d-thumbcaro__stage"></div>
<div class="d-thumbcaro__thumbs">
<span></span><span></span><span class="is-on"></span><span></span>
</div>
</div>
无障碍与性能
无障碍
- 主图区添加 aria-live="polite"，切换后读屏能播报当前是第几张；轨道上的缩略图按钮用 aria-label="查看第 3 张"，不要用 title。
- 键盘操作：左右方向键切换上一张/下一张，Enter 或 Space 在缩略图上聚焦并切换；焦点环要可见。
- 确保当前高亮缩略图不仅靠颜色区分，还带有 2px 边框，色盲用户也能识别。
性能
- 主图和缩略图不要共用同一张原图：缩略图单独裁切 120-160px 宽度、压缩到 20-40KB 的 WebP。
- 主图切换时只预加载下一张，不要一次性预加载全部大图；可以用 link rel="preload" 指定下一帧。
- 过渡动画只用 opacity 或 transform，不要同时切换 layout 属性，避免重排。
常见问题
缩略图当前项如何自动居中？
切换主图后调用 thumb.scrollIntoView({ inline: 'center', behavior: 'smooth' })，或在 JS 里计算 thumb.offsetLeft - (rail.clientWidth - thumb.clientWidth) / 2 并设置 rail.scrollLeft。
移动端缩略图和点状分页怎么取舍？
屏幕宽度小于 360px 或图数超过 8 张时建议用点状；如果图数少且每张差异明显（如不同颜色、不同角度），保留缩略图但要缩小到 44px 并启用横向滚动。
常见搭配
同一页面里经常和「缩略图主导航幻灯片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。