Skip to content

How to Change Bootstrap Carousel Slide Speed?

Ayyaz Zafar1 min read

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:

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.6s to the time you want. You also might want to edit time in the function call below:

Text
.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

Latest tutorials

All 754 →

Get new tutorials by email

One email when something new is published. Unsubscribe anytime.

Written by Ayyaz Zafar, full-stack developer for 15+ years. Work with me