How to Change Bootstrap Carousel Slide Speed?
24/09/2024
—
Ayyaz Zafar
Uncategorized
The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that. 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.