title: How to pause Bootstrap carousel on input focus
body: <p>I have a Bootstrap carousel which contains a simple form. You can set the carousel to pause when hovered upon. However if the cursor leaves the Carousel area while typing within inputs, the carousel reverts back to its default cycle and interval of 5000ms.</p>
  
  <p>I am looking to set it to remain paused during input focus and restart cycle on input focusout.</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
  &lt;div class="carousel-inner"&gt;
      &lt;div id="slide1" class="item"&gt;
          This is a test slide.
      &lt;/div&gt;
      &lt;div id="slide2" class="item" &gt;
          &lt;input type="text" placeholder="name" name="full_name" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Carousel nav --&gt;
  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;‹&lt;/a&gt;
  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;›&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  
  !function ($) {
      $(function(){
          $('#myCarousel.slide').carousel({
              interval: 5000,
              pause: "hover"
          })
      })
  }(window.jQuery)
  
  $('input').focus(function(){
      $("#myCarousel").pause()
  }) /* Will worry about restarting carousel on mouseout if I could get this pause working */
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>It appears that once a carousel has been initially called (and an interval set) you cannot alter that interval or carousel behaviour.</p>
  
  <p>Any insights would be great.</p>