twitter-bootstrap 如何控制 bootstrap carousel 在项目中滑动的速度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17332431/
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
How can I control the speed that bootstrap carousel slides in items?
提问by genxgeek
I see you can set the interval but I want to control how fast the items slide?
我看到您可以设置间隔，但我想控制项目滑动的速度？
// Sets interval...what is transition slide speed?
$('#mainCarousel').carousel({
interval: 3000
});
回答by Dmitry Efimenko
The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that.
In the carousel.lessfile find
API 无法控制速度。尽管您可以修改负责此的 CSS。在carousel.less文件中找到
.item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
}
and change .6sto whatever you want.
并更改.6s为您想要的任何内容。
In case you do not use .less, find in the bootstrap.cssfile:
如果您不使用 .less，请在bootstrap.css文件中找到：
.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;
}
and change 0.6sto the time you want. You also might want to edit time in the function call below:
并更改0.6s为您想要的时间。您可能还想在下面的函数调用中编辑时间：
.emulateTransitionEnd(2000)
at bootstrap.jsin function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.
在bootstrap.js函数Carousel.prototype.slide。同步过渡并防止幻灯片在过渡结束前消失。
EDIT 7/8/2014
编辑 7/8/2014
As @YellowShark pointed out the edits in JS are not needed anymore. Only apply css changes.
正如@YellowShark 指出的那样，不再需要 JS 中的编辑。仅应用 css 更改。
EDIT 20/8/2015Now, after you edit your css file, you just need to edit CAROUSEL.TRANSITION_DURATION (in bootstrap.js) or c.TRANSITION_DURATION (if you use bootstrap.min.js) and to change the value inside it (600 for default). The final value must be the same that you put in your css file( for example 10s in css = 10000 in .js)
编辑 20/8/2015现在，在编辑 css 文件后，您只需要编辑 CAROUSEL.TRANSITION_DURATION（在 bootstrap.js 中）或 c.TRANSITION_DURATION（如果您使用 bootstrap.min.js）并更改其中的值（默认为 600）。最终值必须与您放入 css 文件中的值相同（例如 css 中的 10s = .js 中的 10000）
EDIT 16/01/2018For Bootstrap 4, to change the transition time to e.g., 2 seconds, add
编辑 16/01/2018对于 Bootstrap 4，要将转换时间更改为例如 2 秒，请添加
$(document).ready(function() {
jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000 // 2 seconds
});
to your site's JS file, and
到您网站的 JS 文件，以及
.carousel-inner .carousel-item {
transition: -webkit-transform 2s ease;
transition: transform 2s ease;
transition: transform 2s ease, -webkit-transform 2s ease;
}
to your site's CSS file.
到您网站的 CSS 文件。
回答by jaswinder singh
回答by Chris Harrison
For Twitter Bootstrap 3:
对于 Twitter Bootstrap 3：
You must change the CSS transition as specified in the other answer:
您必须按照其他答案中的说明更改 CSS 过渡：
.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;
}
From 0.6 seconds to 1.5 seconds (for example).
从 0.6 秒到 1.5 秒（例如）。
But also, there is some Javascript to change. In the bootstrap.js there is a line:
但是，还有一些 Javascript 需要更改。在 bootstrap.js 中有一行：
.emulateTransitionEnd(600)
This should be changed to the corresponding amount of milliseconds. So for 1.5 seconds you would change the number to 1500:
这应该更改为相应的毫秒数。因此，在 1.5 秒内，您会将数字更改为 1500：
.emulateTransitionEnd(1500)
回答by Ali Umair
You need to set interval in the main DIV as data-interval tag. The it will work fine and you can give different time to different slides.
您需要在主 DIV 中将间隔设置为数据间隔标记。它会正常工作，您可以为不同的幻灯片提供不同的时间。
<div class="carousel" data-interval="5000">
回答by bkrall
One thing I noticed is that Bootstrap 3 is adding the styles with both a .6sand 0.6s. So you may need to explicitly define your transition duration like this (CSS)
我注意到的一件事是 Bootstrap 3 正在添加带有 a.6s和0.6s. 所以你可能需要像这样明确定义你的过渡持续时间（CSS）
.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;
}
回答by Erik
for me worked to add this at the end of my view:
对我来说，在我的视图末尾添加了这个：
<script type="text/javascript">
$(document).ready(function(){
$("#myCarousel").carousel({
interval : 8000,
pause: false
});
});
</script>
it gives to the carousel an interval of 8 seconds
它给旋转木马一个 8 秒的间隔
回答by kmoser
With Bootstrap 4, just use this CSS:
使用 Bootstrap 4，只需使用此 CSS：
.carousel .carousel-item {
transition-duration: 3s;
}
Change 3sto the duration of your choice.
更改3s为您选择的持续时间。
回答by Patrick Mutwiri
after including bootstrap.min.jsor uncompressed one, you can just add interval as a parameter as below
jQuery("#numbers").carousel({'interval':900 });It works for me
包含bootstrap.min.js或解压缩后，您可以添加间隔作为参数，如下所示
jQuery("#numbers").carousel({'interval':900 });它对我有用
回答by Andreas
If you don't want to change the js files of bootstrap, you can also directly inject the wanted value into the jquery plugin (bootsrap 3.3.6).
如果不想改动bootstrap的js文件，也可以直接在jquery插件中注入想要的值（bootsrap 3.3.6）。
This requires of course, that the carousel is activated manually via js, not directly via the data-ride attribute.
这当然需要通过 js 手动激活轮播，而不是直接通过 data-ride 属性。
For example:
例如：
var interval = 3500;
$.fn.carousel.Constructor.TRANSITION_DURATION = interval - 500;
elem.carousel({
interval : interval
});
回答by Jelgab
If you need to do it programmatically to change (for example) the speed based on certain conditions on perhaps only one of many carousels, you could do something like this:
如果您需要以编程方式更改（例如）基于某些条件的速度，也许只有许多轮播之一，您可以执行以下操作：
If the Html is like this:
如果Html是这样的：
<div id="theSlidesList" class="carousel-inner" role="listbox">
<div id="Slide_00" class="item active"> ...
<div id="Slide_01" class="item"> ...
...
</div>
JavaScript would be like this:
JavaScript 应该是这样的：
$( "#theSlidesList" ).find( ".item" ).css( "-webkit-transition", "transform 1.9s ease-in-out 0s" ).css( "transition", "transform 1.9s ease-in-out 0s" )
Add more .css( ... ) to include other browsers.
添加更多 .css( ... ) 以包含其他浏览器。
