Bootstrap淡入淡出轮播设置相同data-interval后各幻灯片时长不一致问题

问题根源 #

轮播间隔不一致问题由两个配置不匹配导致：

1. Bootstrap轮播的JS逻辑默认内置的过渡时长为0.6s，你通过CSS自定义了3s的淡入淡出过渡，但没有同步告知JS侧你的实际过渡时长，导致定时器计数和实际动画进度不同步
2. data-interval参数的计时起点是当前幻灯片开始激活的瞬间，包含了过渡动画的时间，你设置的5000ms间隔减去3s过渡后，实际完全静止显示的时长仅剩2s，再加上JS默认过渡时长和实际过渡时长的偏差，就会出现各幻灯片停留时长忽长忽短的情况

修复方案 #

第一步：同步JS侧过渡时长配置 #

给轮播父元素添加对应过渡时长属性，值和你CSS中设置的3000ms保持一致：

• 若使用Bootstrap4，添加data-transition-duration="3000"
• 若使用Bootstrap5，添加data-bs-transition="3000"

修改后的父元素代码示例：

<div id="presentation-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-transition-duration="3000">

如果是手动初始化轮播的场景，也可以在JS中直接传参：

// Bootstrap4
$('#presentation-carousel').carousel({
  interval: 8000,
  transitionDuration: 3000
})
// Bootstrap5
new bootstrap.Carousel('#presentation-carousel', {
  interval: 8000,
  transition: 3000
})

第二步：调整data-interval参数到合理值 #

如果需要每张幻灯片完全静止显示的时长为5s，那么data-interval需要设置为「静止显示时长+过渡时长」，也就是5000+3000=8000ms。统一在父级元素设置即可，不需要给每个carousel-item单独加，没有特殊需求的话可以删掉所有carousel-item上的data-interval="5000"属性，继承父级的统一配置即可。

第三步：优化冗余CSS #

你的CSS中!important属于冗余规则，可以直接删除，不影响效果：

.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    transition: opacity ease-in-out 3s;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1;
    transition: opacity ease-in-out 3s;
}

修改完成后所有幻灯片的停留时长就会完全一致，过渡动画也会正常生效。

内容的提问来源于stack exchange，提问作者Ylem_One