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.

Source: http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items/17332516#17332516

Share this post.
Stay up-to-date

Subscribe to our newsletter

Don't miss this

You might also like