title: Starting carousel on hover
body: <p>I am trying to make my carousel start when the user hovers over it. Below is the Javascript that I am using to start the carousel:</p>
  
  <pre><code>function onHover() {
      $('.myCarousel').carousel({
          interval: 2000
      })
  }
  </code></pre>
  
  <p>Here is the HTML code where I am calling the function <code>onHover</code>.</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
      &lt;!-- Indicators --&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;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
              &lt;div class="container"&gt;
                  &lt;h3&gt;Heading 3&lt;/h3&gt;
                  &lt;h1 class="col-md-9"&gt;This is a test&lt;/h1&gt;
              &lt;/div&gt;
              &lt;img src="image.jpg" onmouseover="onHover();" /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I am not sure where I am going wrong here, I think it may be due to the class being set <code>"class="carousel slide"</code> but I am not sure , I would appreciate any help.    </p>