javascripthtmlcsstwitter-bootstrap

How to change the interval time on bootstrap carousel?

I have a bootstrap carousel on my web page, I'm trying the increase the time interval between each slide. The default delay of 5000 milliseconds is too fast, I need about 10 seconds.

Solution

  • You can use the options when initializing the carousel, like this:

    // interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$('.carousel').carousel({
  interval: 1000 * 10
});

    or you can use the interval attribute directly on the HTML tag, like this:

    <div class="carousel" data-interval="10000">

    The advantage of the latter approach is that you do not have to write any JS for it - while the advantage of the former is that you can compute the interval and initialize it with a variable value at run time.