Question

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

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

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

Answer 1

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

BUNDLED WITH
   2.0.2

Answer 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%);
}

Bootstrap旋转木马过渡故障

7 个答案: