纯CSS垂直轮播需用transform: translateY()配合Flexbox布局实现滑动，Flexbox仅负责垂直排列，滑动依赖动画位移；自动轮播需@keyframes，交互切换可用radio+:checked，但无缝循环和动态控制仍需JS。
Flexbox本身不支持滑动，得靠CSS动画+transform配合
Flexbox只是布局工具，不能直接实现“滑动”效果。所谓“垂直滑动幻灯片”，本质是让容器内子项沿Y轴位移，并用transform: translateY()切换可见项，再配合transition或@keyframes做过渡。Flexbox只负责把所有幻灯片项堆成一列、撑满全屏——它解决的是“怎么排”，不是“怎么动”。
常见错误是直接给flex-direction: column的容器加overflow-y: scroll，结果变成手动滚动条，不是自动轮播；或者误以为justify-content: center能触发切换逻辑，其实它只是居中静态内容。
- 必须用
transform移动整个幻灯片容器（或每个item），而非改变top/margin——后者会触发重排，性能差 - 全屏需设
height: 100vh，且父容器不能有overflow: hidden以外的截断（否则动画被裁） - 响应式关键点：在小屏上改用
flex-direction: column保持垂直流，在大屏可切为row横向滑动（但题干明确要垂直）
用CSS自定义属性控制当前幻灯片索引
纯CSS实现轮播，离不开--active-index这类自定义属性驱动transform偏移量。每个幻灯片区块用:nth-child()匹配其位置，再结合calc()算出对应translateY值。例如3张图，每张高100vh，第2张就要translateY(-100vh)。
注意：浏览器对calc()中var(--active-index)的支持没问题，但别在calc()里混用em或rem单位——vh最稳。
立即学习“前端免费学习笔记（深入）”；
- 初始化时设
--active-index: 0，然后用:root或幻灯片容器上设置 -
transform: translateY(calc(var(--active-index) * -100vh))—— 这里负号不能漏，向下移才是“切换到下一张” - 如果用
@keyframes做自动轮播，动画中修改--active-index无效，得用JS或改用animation直接控制transform
响应式断点里重置flex方向和高度单位
“响应式全屏”不是指缩放，而是适配不同视口比例。竖屏手机（max-height: 700px）和横屏平板（min-height: 800px）可能需要不同处理：前者保持flex-direction: column，后者若宽屏够大，可考虑改为row并用scroll-snap——但题干要求垂直滑动，所以重点在vh单位的稳定性。
常见坑是用了height: 100%，结果父元素没设高度，导致幻灯片塌陷；或者媒体查询里只改font-size，忘了同步调整translateY的基准单位。
- 必须写
height: 100vh，不能依赖100%，尤其嵌套在position: fixed容器里时 - 在
@media (max-aspect-ratio: 1/1)（竖屏）下，确保flex-direction: column已生效；横屏可加min-height: 100vh防内容挤压 - 移动端Safari对
vh有缺陷（地址栏显隐影响），可用env(height: 100vh)兜底，但需检测支持
用:focus-within或:checked模拟交互控制
纯CSS幻灯片的“切换”只能靠用户交互触发，比如点击导航按钮（input[type="radio"]）或聚焦指示器（button:focus-within）。没有JS时，:checked是最可靠方式：每个幻灯片对应一个隐藏单选框，用label关联，选中后通过兄弟选择器激活对应项。
容易忽略的是z-index层级——若导航按钮在幻灯片下方，:checked状态切换后，新幻灯片可能被旧层遮盖；另外transition必须写在被变换的容器上，而不是单个item上。
- 结构示例：
<input type="radio" name="slide" id="s1"><label for="s1">1</label><div class="slides">...</div> - 关键CSS：
.slides { transition: transform 0.4s ease; }，且input#s2:checked ~ .slides { transform: translateY(-100vh); } - 无障碍注意：隐藏
input但保留for关联，屏幕阅读器仍可操作；不要用display: none，改用position: absolute; left: -9999px
真正难的是循环播放和自动轮播——纯CSS做不到无缝循环（translateY无法回到首帧而不跳变），也没法监听时间。这些必须交由JS补足，CSS只管视觉呈现和基础交互。
