title: Bootstrap carousel doesn't start on-load and sliding stops with hover
body: <p>I have this code in HTML. The whole section is in id="main-slider". The carousel doesn't slide unless I click on the arrow and it works perfectly after that. Another problem which I'm facing is that the slider is a full page slider. By default, bootstrap stops sliding when hovered. I do not want this effect to take place. To solve both, I gave the jQuery function to overwrite this, but nothing seems to work. After spending 6 hours reading and trying almost everything in Github and at this place, finally decided to get help here.</p>
  
  <pre><code>    &lt;section id="main-slider"&gt;
      &lt;div class="carousel slide"&gt;
        &lt;ol class="carousel-indicators "&gt;
          &lt;li class="active" data-slide-to="0" data-target="#main-slider"&gt;&lt;/li&gt;
          &lt;li data-slide-to="1" data-target="#main-slider"&gt;&lt;/li&gt;
          &lt;li data-slide-to="2" data-target="#main-slider"&gt;&lt;/li&gt;
          &lt;li data-slide-to="3" data-target="#main-slider"&gt;&lt;/li&gt;
        &lt;/ol&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active" style="background-image: url(images/slider1.jpg)"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                &lt;div class="carousel-content centered"&gt;
                  &lt;div class="center" id="text-position"&gt; &lt;!-- self defined class in css--&gt;
                    &lt;h2&gt;&lt;/h2&gt;
                      &lt;p&gt;&lt;/p&gt;
                        &lt;a class="btn btn-md-primary&gt;&lt;/a&gt;
                  &lt;/div&gt; &lt;!-- /center --&gt;
                &lt;/div&gt; &lt;!-- /carousel-content --&gt;
              &lt;/div&gt; &lt;!-- /col-sm --&gt;
            &lt;/div&gt; &lt;!-- /row --&gt;
          &lt;/div&gt; &lt;!-- /container --&gt;
        &lt;/div&gt; &lt;!-- /item active --&gt;
      &lt;!--I have 3 more similar rows--&gt;
      &lt;/div&gt; &lt;!-- carousel ends --&gt;
  
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(function(){
      $('#main-slider.carousel').carousel({
          interval: 2000,
          pause: false
          });
      });
     &lt;/script&gt;
  </code></pre>