3

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

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

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

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

4

7 回答 7

4

我尝试从 .left 和 .right 中删除属性，但它并没有为我解决。我想出的解决办法是加快过渡。Bootstrap 的默认设置是 0.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;
}

希望这可以帮助！

于 2015-08-05T18:45:46.913 回答
2

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

在 FF 和 Chrome 中测试。

于 2013-03-27T12:51:49.713 回答
2

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

.carousel { overflow: hidden; }
.carousel-item { overflow: hidden; }
于 2019-06-27T15:05:16.920 回答
1

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

于 2015-06-17T12:55:11.570 回答
1

我试过了，它奏效了：

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

引导版本：3.3.7

于 2018-02-03T18:14:36.430 回答
0

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

.carousel-item {backface-visibility: visible;}
于 2018-04-22T19:42:48.277 回答
0

我在 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%);
}
于 2021-06-28T12:05:41.427 回答