twitter-bootstrap Bootstrap 轮播过渡故障
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15656246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel transition glitch
提问by supervalters
I have a problem with bootstrap carousel. I added custom controls and I styled them according to design, but when I am clicking next slide the previous image disappears leaving white space in the middle.
我有引导轮播的问题。我添加了自定义控件并根据设计对它们进行了样式设置，但是当我单击下一张幻灯片时，上一张图像消失了，在中间留下了空白。
I edited the bootstrap.css where I changed the .carousel-caption and I added some custom css for the buttons.
我编辑了 bootstrap.css，在其中更改了 .carousel-caption，并为按钮添加了一些自定义 css。
Here are the test page: http://valters.me/b/
这是测试页面：http: //valters.me/b/
And I managed to take a screenshot: http://d.pr/i/yGzY
我设法截取了屏幕截图：http: //d.pr/i/yGzY
采纳答案by Billy Moat
If you remove the transition css from the .carousel-control.left and .carousel-control.right that seems to fix the problem.
如果您从 .carousel-control.left 和 .carousel-control.right 中删除过渡 css 似乎可以解决问题。
Tested in FF and Chrome.
在 FF 和 Chrome 中测试。
回答by stackemz
I tried removing properties from .left and .right, but it didn't solve it for me. The solve I came up with was speeding up the transition. Bootstrap's default is .6s ease-in-out, .5 seemed to do the trick for me. Try adding this to your CSS:
我尝试从 .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;
}
Added this as a backup because white is waaaaay more noticable than black:
添加此作为备份，因为白色比黑色更引人注目：
.carousel-inner{
/*just incase the flash (style above) comes back*/
background: #000;
}
Hope this helps!
希望这可以帮助！
回答by Arthur
In my case, someone previously had put a position: absoluteon the imgtag inside the carousel. Removing it did helped.
就我而言，之前有人在轮播内的img标签上放置了一个position: absolute。删除它确实有帮助。
回答by Pawan Singh
I tried this and it worked:
我试过了，它奏效了：
.carousel-inner > .item {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
Bootstrap Version: 3.3.7
引导程序版本：3.3.7
回答by Антон Сумин
i tried other solutions but only this worked on FF.
我尝试了其他解决方案，但仅适用于 FF。
.carousel-item {backface-visibility: visible;}
回答by Marcelo Henrique Fonseca
For bootstrap 4 this worked for me. In your .css:
对于引导程序 4，这对我有用。在你的 .css 中：
.carousel { overflow: hidden; }
.carousel-item { overflow: hidden; }
