CSS Bootstrap 3 轮播过渡速度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20840018/
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 3 carousel transition speed
提问by jbiWeisendorf
I'm running into a problem.
我遇到了问题。
I've tried to do the following:
我尝试执行以下操作：
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
In the bootstrap.js:
.emulateTransitionEnd(600)
But it doesn't seem to work properly. The animation speeds up. But I use a carousel-caption that contains text, which bugs. It slides properly, but then the .content-caption moves all the way to the left, disappears, and appears in it's normal position.
但它似乎不能正常工作。动画加速。但是我使用包含文本的轮播标题，这会出错。它可以正常滑动，但随后 .content-caption 一直向左移动，消失，并出现在正常位置。
Is there any other variable I need to change?
是否还有其他变量需要更改？
回答by jbiWeisendorf
visit: http://getbootstrap.com/javascript/#carousel
访问：http: //getbootstrap.com/javascript/#carousel
Add the following on the end of your html-file to set the transition speed: 10000 (10sec)
在 html 文件的末尾添加以下内容以设置转换速度：10000 (10sec)
<script src="../../dist/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 10000
});
</script>
回答by Ajeesh Joseph
Here is the very simple way;
这是非常简单的方法；
Add "data-interval="2000"in the html. eg:<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
"data-interval="2000"在html中添加。例如：<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
回答by Randy Slavey
To change the actual slide speed, not the transition time, since I use LESS, I found adding this to my custom.less (which imports all the other bootstrap LESS files first) worked:
要更改实际滑动速度，而不是转换时间，因为我使用 LESS，我发现将其添加到我的 custom.less（首先导入所有其他引导 LESS 文件）工作：
@slideSpeed: 2s
.carousel-inner {
> .item {
.transition(@slideSpeed ease-in-out left);
@media all and (transform-3d), (-webkit-transform-3d) {
transition: transform @slideSpeed ease-in-out;
}
}
}
Hopefully this helps someone like @ToolmakerSteve or myself in the future.
希望这可以帮助像@ToolmakerSteve 或我自己这样的人。
Turns out there's a constant in the bootstrap.js that I had to change to an option as well (see "duration" below)
原来 bootstrap.js 中有一个常量，我也必须将其更改为一个选项（请参阅下面的“持续时间”）
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true,
keyboard: true,
duration: 600
}
and replace:
并替换：
//.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
.emulateTransitionEnd(this.options.duration)
Then, I can add data-duration="1000" to my markup.
然后，我可以将 data-duration="1000" 添加到我的标记中。
回答by Robbie McFarlane
Those using bootstrap 4 scss can use this variable :)
那些使用 bootstrap 4 scss 的人可以使用这个变量:)
$carousel-transition: transform .6s ease-in-out !default;
回答by ratnadhatamam
This works for me in Bootstrap 4.1
这在 Bootstrap 4.1 中对我有用
#MyCarousel .carousel-item {
transition: transform 1s ease-in-out;
}
#MyCarousel .carousel-item {
transition: transform 1s ease-in-out;
}
Change 1s to any duration. Using an id for your carousel will automatically override Bootstrap, and allows you to use different speeds for different carousels.
将 1s 更改为任何持续时间。为您的轮播使用 id 将自动覆盖 Bootstrap，并允许您为不同的轮播使用不同的速度。
回答by The EasyLearn Academy
.carousel-inner>.item {
-webkit-transition: 0.9s ease-in-out left;
transition: 0.9s ease-in-out left;
-webkit-transition: 0.9s, ease-in-out, left;
-moz-transition: .9s, ease-in-out, left;
-o-transition: .9s, ease-in-out, left;
transition: .9s, ease-in-out, left;
}
