How can I control the speed that bootstrap carousel slides in items?
Just write data-interval
in the div
containing the carousel:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
Example taken from w3schools.
The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that.
In the carousel.less
file find
.item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
}
and change .6s
to whatever you want.
In case you do not use .less, find in the bootstrap.css
file:
.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.6s
to the time you want. You also might want to edit time in the function call below:
.emulateTransitionEnd(2000)
at bootstrap.js
in function Carousel.prototype.slide
. That synchronize transition and prevent slide to disapear before transition ends.
EDIT 7/8/2014
As @YellowShark pointed out the edits in JS are not needed anymore. Only apply css changes.
EDIT 20/8/2015 Now, 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)
EDIT 16/01/2018 For Bootstrap 4, to change the transition time to e.g., 2 seconds, add
$(document).ready(function() {
jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000 // 2 seconds
});
to your site's JS file, and
.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.