bootstrap 官方 css 中没有 .carousel-vertical 类，垂直轮播需通过自定义 css 实现：固定 .carousel-inner 高度、设置 .carousel-item 为 position: absolute、重写 transform: translatey() 及对应状态类（如 .carousel-item-start/.carousel-item-end）的过渡样式，并确保 html 结构正确且无干扰堆叠上下文的属性。
为什么直接加 .carousel-vertical 不生效
Bootstrap 官方 CSS 里压根没有 .carousel-vertical 这个类——它不是内置功能，而是靠自定义 CSS 驱动的。你看到的“垂直轮播”方案，本质是把默认的水平位移（transform: translateX()）替换成垂直位移（translateY()），并重写对应状态的 class 组合逻辑。
必须改哪些 CSS 类和 transition 属性
垂直滑动依赖三组关键样式：容器高度固定、子项绝对定位、以及 .carousel-item 在不同状态下的 transform 值。漏掉任意一个都会卡在顶部不动或堆叠错乱。
-
.carousel.vertical .carousel-inner必须设height（比如400px），否则子项无法按百分比位移 -
.carousel.vertical .carousel-item要有position: absolute和top: 0，且不能被父级transform或filter干扰堆叠上下文 - 过渡必须同时覆盖
transform和opacity，否则只动位置不淡出，或只淡出不位移 - 状态类名在 Bootstrap 4/5 中略有差异：
— Bootstrap 4 用.item.next/.item.prev
— Bootstrap 5 用.carousel-item-start/.carousel-item-end，但最终都靠 JS 动态切换
示例（适配 Bootstrap 5）：
.carousel.vertical .carousel-inner {
height: 400px;
}
.carousel.vertical .carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
.carousel.vertical .carousel-item.active {
transform: translateY(0);
opacity: 1;
}
.carousel.vertical .carousel-item-start {
transform: translateY(-100%);
opacity: 0;
}
.carousel.vertical .carousel-item-end {
transform: translateY(100%);
opacity: 0;
}
JS 控制逻辑要不要动
不用改 JS。Bootstrap 的 carousel 方法本身不关心方向，它只负责切换 .active 和状态类（如 .carousel-item-start）。只要 CSS 正确响应这些类，垂直滑动就自动生效。
- 确保 HTML 结构中每个
.carousel-item都包裹在.carousel-inner内，且外层有.carousel.vertical类 - 不要删掉
.carousel类——它是 JS 初始化的触发器，去掉就完全没轮播逻辑了 - 如果用了
data-bs-interval，它只控制自动轮播间隔，不影响动画方向或速度
常见卡死/错位问题排查点
垂直滑动最常卡在第一张图不动，或所有图挤成一坨。根本原因几乎都出在 DOM 层级或 CSS 堆叠上。
- 检查
.carousel-inner是否被 flex 或 grid 容器包裹——这会破坏position: absolute的定位基准 - 确认没有外层元素设置了
transform、filter或will-change，它们会创建新堆叠上下文，让transform: translateY()失效 - 用开发者工具选中一个
.carousel-item，看 computed 样式里transform值是否随状态变化；不变说明 class 没切过去，可能是 JS 初始化失败 - 图片本身尺寸过大或未设置
object-fit: cover，会导致容器高度塌陷，进而让translateY(-100%)计算失准
真正起作用的永远是那几行 CSS，而不是插件版本或 JS 配置。方向错了，调再多次 carousel('next') 也没用。
