Bootstrap 5 原生支持 carousel-fade 类实现淡入淡出，但需配合特定 CSS 过渡控制才能避免图像尺寸不一时的闪烁或重叠问题；本文提供纯 CSS 解决方案，无需 JS 干预，确保前一帧完全淡出后再淡入下一帧。
bootstrap 5 原生支持 `carousel-fade` 类实现淡入淡出，但需配合特定 css 过渡控制才能避免图像尺寸不一时的闪烁或重叠问题；本文提供纯 css 解决方案，无需 js 干预，确保前一帧完全淡出后再淡入下一帧。
Bootstrap 5 的轮播组件（Carousel）默认使用滑动（slide）动画，但通过添加 carousel-fade 类即可启用基础淡入淡出效果。然而，仅加该类并不足以解决“不同尺寸图片切换时画面突变”的问题——因为原生 fade 过渡未严格控制淡出与淡入的时序，可能导致两帧短暂叠加或空白闪现。
✅ 正确做法是：覆盖 Bootstrap 的默认过渡行为，精确分离「淡出」与「淡入」阶段，利用 CSS 的 transition-delay 实现串行执行：
/* 当前激活项开始退出（淡出）：0s 延迟，600ms 持续 */
#myCarousel .active.carousel-item-end,
#myCarousel .active.carousel-item-start {
transition-duration: 600ms;
transition-delay: 0ms;
}
/* 下一项准备进入（淡入）：等待前一项完全淡出后才启动，600ms 延迟 + 600ms 持续 = 总耗时 1200ms */
#myCarousel .carousel-item-next,
#myCarousel .carousel-item-prev {
transition-duration: 600ms;
transition-delay: 600ms;
}
? 关键说明：
- .carousel-item-end / .carousel-item-start 是 Bootstrap 在切换过程中动态添加的类，分别表示当前项向右/向左退出；
- .carousel-item-next / .carousel-item-prev 则标识即将进入的下一张或上一张；
- 通过为二者设置不同的 transition-delay，可强制实现「先彻底隐藏 → 再渐显新图」的原子化过渡。
⚠️ 注意事项：
- 若启用自动播放（data-bs-ride="carousel"），必须同步调整 data-bs-interval，使其 ≥ 总过渡时间（本例为 1200ms）。例如：
<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="1200" data-bs-pause="hover"> <li>若希望每张图停留更久（如 3 秒），则设 data-bs-interval="4200"（3000ms 显示 + 1200ms 过渡）；</li> <li>不要移除 carousel-fade 类，它是触发 opacity 动画的前提；</li> <li>避免自定义 JavaScript 手动控制 active 类（如原问题中的 nextSlide() 函数），否则会破坏 Bootstrap 内部状态和事件流，推荐完全交由原生事件驱动。</li> <p>? 小贴士：若需微调速度，只需等比例缩放两处 600ms 值（如改为 400ms/400ms），并同步更新 data-bs-interval 即可。此方案轻量、稳定、兼容性强，是解决多尺寸图片轮播视觉断层的最佳实践。</p> </div>
