How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?

Question

Using bootstrap.js version 2.02

I\'m trying to get the Twitter Bootstrap Carousel to automatically cycle as soon as someone visits my site. Right now, the auto cycl

Answer 1

    <div id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
               <img src="img1" class="img-responsive" alt="stuff1" > 
              </div>
              <div class="item">
               <img src="img2" class="img-responsive" alt="stuff2" > 
              </div>
            </div>
           <!-- Controls-->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a> 
          </div>

 <!--This script should be at the very bottom of the page (footer works for me)-->  
    <script>
    $('#myCarousel').carousel
    ({
        interval: 2000,


        })

    </script>

Answer 2

The right way to fix this is to add the "active" class to the first image in the carousel while creating it. This will make the carousel start cycling as soon as possible.

Here is an example:

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

Answer 3

Try to initialize your carousel like this:

$('.carousel').carousel().next();

Answer 4

Not sure if you got this sorted out, but I was having that problem as well. I resolved it by wrapping the carousel interval setting in a function like this:

!function ($) {
$(function() {
    $('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);

Answer 5

The jquery.js file must load before the bootstrap.js, whether they are placed in the head tags or at the end of your file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>

Answer 6

There is one more way to automatically cycle the bootstrap carousel.

use data-ride="carousel" attribute. It tells the bootstrap to begin animating the carousel immediately when the page loads.