Bootstrap4 carousel设置carousel-inner高度为auto后切换内容闪烁如何解决

问题根因 #

Bootstrap 4 默认轮播逻辑中，非激活状态的.carousel-item会被设置display: none仅保留激活项可见。将.carousel-inner高度设为auto后，轮播切换过渡结束的瞬间，旧激活项会被立刻移除active类、变为display: none，此时新激活项的高度还未被浏览器同步计算渲染，就会出现父容器.carousel-inner短暂无内容支撑、高度归零的闪烁问题。

解决方案 #

方案1：纯CSS修复（无侵入，推荐大多数场景使用） #

无需修改JS代码，仅新增如下CSS规则即可，完全保留响应式自适应高度特性：

.carousel-inner {
  position: relative;
}
.carousel-item {
  /* 覆盖默认display:none，避免切换瞬间内容消失 */
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  /* 过渡时长和Bootstrap默认轮播过渡保持一致 */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
/* 激活项使用相对定位，正常撑起父容器高度 */
.carousel-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
/* 切换过程中前后项均可见，避免高度断档 */
.carousel-item-next, .carousel-item-prev {
  opacity: 1;
  visibility: visible;
}

该方案原理为：非激活项通过绝对定位隐藏、不占用文档流高度，仅激活项正常撑开父容器高度，切换全程不会出现内容空窗期，自然不会出现高度归零闪烁的问题。窗口尺寸变化时，激活项高度自动变化，父容器高度也会同步适配。

方案2：JS动态适配（适合轮播项高度差异较大的场景） #

如果你的轮播各帧高度差较大，CSS方案适配效果不好，可以用JS监听轮播事件动态处理，也能保留响应式特性：

// 监听轮播开始切换事件
$('.carousel').on('slide.bs.carousel', function (e) {
  // 提前获取即将展示的轮播项高度，给父容器预设高度
  const nextItemHeight = $(e.relatedTarget).outerHeight();
  $(this).find('.carousel-inner').css('height', nextItemHeight);
// 监听轮播切换完成事件
}).on('slid.bs.carousel', function () {
  // 切换完成后将高度改回auto，保留窗口缩放自适应能力
  $(this).find('.carousel-inner').css('height', 'auto');
});

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