Bootstrap旋转木马过渡故障

Question

我有一个bootstrap轮播的问题。 我添加了自定义控件，我根据设计设置了它们，但是当我点击下一张幻灯片时，前一张图片消失了，中间留下了空白区域。

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

以下是测试页面： http ： //valters.me/b/

我设法截取屏幕截图： http ： //d.pr/i/yGzY

Answer 1

我尝试从.left和.right中删除属性，但它并没有为我解决。 我想出的解决方案是加快转型。 Bootstrap的默认值为.6s，easy-in-out，.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;
}

希望这可以帮助！

Answer 2

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

在FF和Chrome中测试过。

Answer 3

在我的情况下，有人先前在旋转木马内的img标签上放置了一个位置：绝对 。 删除它确实有帮助。

Answer 4

我试过这个并且它有效：

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

Bootstrap版本：3.3.7

Answer 5

我尝试了其他解决方案，但只有这个在FF上工作。

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

Answer 6

对于bootstrap 4，这对我有用。 在你的.css中：

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