IMAGE & MEDIA
全屏沉浸式幻灯片Fullscreen Image Slider
每张图铺满整个视口，文案浮在图上，像电影开场。视觉张力最强的一类幻灯片。
效果预览
常见变体
视频首屏版Video Fullscreen Hero
把图片换成压缩后的短循环视频或静音背景视频，增强首屏动态感。
静态首屏版Static Fullscreen Hero
只做一张全屏图，不轮播，文案居中，常见于落地页首屏。
适合用在哪
品牌发布会、摄影集开场、高端产品首屏、活动落地页。
不适合：信息密度高的后台、文档或需要快速对比的页面：全屏幻灯片一次只展示一屏，用户想看第二屏必须等待或操作；如果目标是让用户快速获取信息，用卡片网格或普通列表更合适。
和相近模式的区别
全出血英雄区Full-bleed Hero
两者都铺满首屏，但 hero-fullbleed 通常只放一张图 + 一个主 CTA，不轮播；全屏幻灯片是多张图按时间切换，更强调叙事和视觉张力。如果首屏只有一句话和一个按钮，不要做轮播。
滚动吸附分页Scroll Snap
scroll-snap 是用户主导的整页/整屏吸附滚动，适合长页面分段；全屏幻灯片是组件内的自动/手动翻页，适合首屏的有限几张精选。不要让全屏幻灯片嵌在页面中段，会切断用户的滚动节奏。
容易踩的坑
- 图片未压缩或用的是 4K 原图，首屏 LCP 超过 3 秒，移动端直接白屏。
- 文案只在桌面端可读，手机上图上的白字被地址栏或背景暗部吞掉。
- 自动轮播没有暂停按钮，也不响应 prefers-reduced-motion，违反 WCAG 2.2.2。
设计提示词 · Prompt
全屏沉浸式幻灯片（Fullscreen Image Slider）：每张幻灯片 width:100vw、height:100dvh（或 100svh），图片 object-fit:cover 铺满，上方叠一层从黑到透明的渐变蒙层保证文案可读。文案居中或左下对齐，包含 Eyebrow、40-64px 白字标题、18px 半透明白副文案、主按钮。底部中央放 8-10px 圆点指示器，当前点实心白、其余半透明。左右放 48px 圆形半透明箭头。自动播放 6-8s 切换，悬停或聚焦时暂停（WCAG 2.2.2）。切换用 700-900ms 的淡入淡出或水平滑动。
Fullscreen Image Slider: each slide fills 100vw × 100dvh (use dvh or svh to avoid mobile address-bar issues), with the image set to object-fit:cover and a dark gradient overlay to keep text legible. Place text centered or bottom-left: an eyebrow, a 40-64px white headline, an 18px semi-transparent white subline, and a primary CTA. Add 8-10px dot indicators at the bottom center and 48px circular translucent arrows on the sides. Auto-advance every 6-8s, but pause on hover/focus and provide a pause button. Use a 700-900ms fade or horizontal slide transition.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
.fullslider { position: relative; width: 100%; height: 100%; color: #fff; overflow: hidden; }
.fullslider__slide,
.fullslider__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fullslider__ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.35) 100%); }
.fullslider__txt { position: absolute; left: 16px; right: 16px; bottom: 48px; z-index: 2; }
.fullslider__txt b { display: block; font-size: 22px; line-height: 1.15; font-weight: 780; margin-bottom: 6px; }
.fullslider__txt span { display: block; font-size: 12px; opacity: .85; }
.fullslider__dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.fullslider__dots span { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.4); }
.fullslider__dots span.is-on { background: #fff; }
.fullslider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 99px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); display: grid; place-items: center; font-size: 18px; color: #fff; cursor: pointer; z-index: 3; }
.fullslider__nav--l { left: 12px; }
.fullslider__nav--r { right: 12px; }
@media (prefers-reduced-motion: reduce) {
.fullslider__slide { transition: none; }
}
演示 HTML 结构
<div class="s s--abs d-fullslider"> <div class="d-fullslider__slide" style="background:linear-gradient(135deg,#1e1b4b,#4c1d95)"></div> <div class="d-fullslider__ov"></div> <div class="d-fullslider__txt"><b>把世界收进镜头</b><span>每一次快门，都是一次短途旅行。</span></div> <div class="d-fullslider__dots"><span class="is-on"></span><span></span><span></span></div> <span class="d-fullslider__nav d-fullslider__nav--l">‹</span> <span class="d-fullslider__nav d-fullslider__nav--r">›</span> </div>
无障碍与性能
无障碍
- 自动轮播超过 5 秒必须提供暂停/播放按钮，并响应鼠标悬停和键盘聚焦时暂停（WCAG 2.2.2）。
- 整个轮播加 role="region" aria-roledescription="轮播" aria-label="精选"，每张幻灯片加 role="group" aria-roledescription="幻灯片" aria-label="第 N 张，共 M 张"。
- 轮播切换时更新 aria-current="true"，并在容器上设置 aria-live="polite" 让读屏播报当前张。
性能
- 首屏大图必须压缩：桌面端 1600-2000px 宽度、WebP 格式、质量 75-80，控制在 150-300KB；移动端提供 800-1200px 版本。
- 使用 loading="lazy" 对非首帧不生效，改用 <link rel="preload" as="image" imagesrcset=...> 预加载下一张。
- 避免在幻灯片里放大量文字或 Lottie，它们会抬高 LCP 和 CLS；文案尽量用 HTML 文本。
常见问题
100vh 和 100dvh 在移动端有什么区别？
100vh 在 iOS Safari 会包含底部地址栏和顶部工具栏，导致底部被遮挡；100dvh 会随工具栏显隐动态计算可用高度。100svh 则取最小高度，适合不希望页面跳动的情况。
用户点了暂停后刷新页面，是否要记住状态？
建议用 localStorage 或 sessionStorage 记住用户是否手动暂停；prefers-reduced-motion 为 reduce 时默认不自动播放。
常见搭配
同一页面里经常和「全屏沉浸式幻灯片」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。