引导轮播转换故障答案

【问题标题】：Bootstrap carousel transition glitch引导轮播转换故障
【发布时间】：2021-06-28 20:10:55
【问题描述】：

我遇到了引导轮播的问题。我添加了自定义控件并根据设计对它们进行了样式设置，但是当我单击下一张幻灯片时，上一张图像消失了，中间留下了空白。

我编辑了 bootstrap.css，在其中更改了 .carousel-caption，并为按钮添加了一些自定义 css。

这里是测试页面：http://valters.me/b/

我成功截屏了：http://d.pr/i/yGzY

【问题讨论】：

或者您可以建议替代轮播。
尝试为图片添加高度和宽度。
@shakabra 没关系，里面只有 html 也会出现故障。
你见过这个吗？ github.com/twitter/bootstrap/issues/2647
@shakabra 阅读它，但它无济于事，因为我需要字幕。也许您可以提出一些替代方案？

标签： jquery css twitter-bootstrap

【解决方案1】：

我尝试从 .left 和 .right 中删除属性，但它并没有为我解决问题。我想出的解决办法是加快过渡。 Bootstrap 的默认设置是 .6s 缓入出局，0.5 似乎对我有用。尝试将其添加到您的 CSS：

.carousel-inner>.item{
   /*disables white flash*/
   -webkit-transition: -webkit-transform .5s ease-in-out;
   -o-transition: -o-transform .5s ease-in-out;
   transition: transform .5s ease-in-out;
}

添加这个作为备用，因为白色比黑色更显眼：

.carousel-inner{
/*just incase the flash (style above) comes back*/
   background: #000;
}

希望这会有所帮助！

【讨论】：

很奇怪，4.0.0 已经发布，但轮播有时仍然滞后。在 Firefox（Chrome 很好）上滑动时，我的跳跃闪烁。 Tho，我还必须将其添加到 .carousel-inner>.item 中：-webkit-backface-visibility: visible !important;背面可见性：可见！重要；
这并没有为我解决这个问题，但黑色背景确实很有帮助。

【解决方案2】：

如果您从 .carousel-control.left 和 .carousel-control.right 中删除过渡 css，似乎可以解决问题。

在 FF 和 Chrome 中测试。

【讨论】：

虽然这行得通，但我不知道为什么？控件与项目转换有什么关系？

【解决方案3】：

对于引导程序 4，这对我有用。在您的 .css 中：

.carousel { overflow: hidden; }
.carousel-item { overflow: hidden; }

【讨论】：

【解决方案4】：

就我而言，之前有人在轮播中的 img 标记上放置了 position: absolute。删除它确实有帮助。

【讨论】：

【解决方案5】：

我试过了，效果很好：

.carousel-inner > .item {
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
}

引导版本：3.3.7

【讨论】：

【解决方案6】：

我尝试了其他解决方案，但只有这对 FF 有效。

.carousel-item {backface-visibility: visible;}

【讨论】：

【解决方案7】：

我在 bootstrap 5.0.2 和 react-bootstrap 1.6.1 中遇到了这个问题。

我能够通过修改正在应用的 .css 样式提出解决方案。

将此添加到您的自定义 .css 文件以覆盖默认 bootstrap.css

carousel-item-next{
  transition: transform 0s ease-in-out;
}

.carousel-item-prev{
    transition: transform 0s ease-in-out;
}
.carousel-item-left {
    transform: translateX(-100%);
}
.carousel-item-right {
    transform: translateX(100%);
}

【讨论】：