title: How to change interval of a bootstrap carousel once it has been initialised
body: <p>According to the doco, using the following will set the carousel cycle speed:</p>
  
  <pre><code>$('.carousel').carousel({
    interval: 2000
  })
  </code></pre>
  
  <p>However if you have already initialised the carousel, calling the above with a different interval has no effect.</p>
  
  <p>I should note that initialising the carousel via JS doesn't set the <code>data-interval</code> on the carousel. I've also searched quite a bit on this topic, but the results are all about people trying to set up at a fixed speed. I want to change the speed once it's already been initialised.</p>
  
  <p>The code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('#homeCarousel').carousel({
          interval:2000,
          pause: "false"
      });
      $('#slowButton').click(function () {
          $('#homeCarousel').carousel({interval: 10000});
      });
      $('#fastButton').click(function () {
          $('#homeCarousel').carousel({interval: 1000});
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#carouselButtons {
      margin-left: 100px;
      position: absolute;
      bottom: 0px;
  }
  
  .item {
      color: white;
      background-color: black;
      width:100%;
      height: 350px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- Carousel --&gt;
  &lt;div id="homeCarousel" class="carousel slide"&gt;
    &lt;!-- Menu --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
      
    &lt;!-- Items --&gt;
    &lt;div class="carousel-inner"&gt;
        
        &lt;!-- Item 1 --&gt;
      &lt;div class="item active"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Bootstrap 3 Carousel Layout&lt;/h1&gt;
            &lt;p&gt;This is an example layout with carousel that uses the Bootstrap 3 styles.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="http://getbootstrap.com"&gt;Learn More&lt;/a&gt;
          &lt;/p&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        
        &lt;!-- Item 2 --&gt;
      &lt;div class="item"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Changes to the Grid&lt;/h1&gt;
            &lt;p&gt;Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        
        &lt;!-- Item 3 --&gt;
      &lt;div class="item"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Percentage-based sizing&lt;/h1&gt;
            &lt;p&gt;With "mobile-first" there is now only one percentage-based grid.&lt;/p&gt;
            &lt;p&gt;&lt;a class="btn btn-large btn-primary" href="#"&gt;Browse gallery&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
      &lt;span class="icon-prev"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
      &lt;span class="icon-next"&gt;&lt;/span&gt;
    &lt;/a&gt;  
    &lt;div id="carouselButtons"&gt;
        &lt;button id="slowButton" type="button" class="btn btn-default btn-xs"&gt;
            &lt;span class="glyphicon glyphicon-play"&gt;&lt;/span&gt;
         &lt;/button&gt;
        &lt;button id="fastButton" type="button" class="btn btn-default btn-xs"&gt;
            &lt;span class="glyphicon glyphicon-forward"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>