How can I control the speed that bootstrap carousel slides in items?

Question

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
});

Answer 1

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.

Answer 2

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.

Answer 3

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 class="carousel" data-interval="5000">