Comment puis-je faire le Bootstrap js carrousel automatiquement le cycle dès que le chargement de la page?

Remarque: Comme indiqué dans les commentaires de cette solution fonctionne correctement pour Bootstrap 2. Reportez-vous à MattZ de réponse pour des instructions sur la façon d'accomplir le même comportement sur Bootstrap 3.

J'ai eu le même problème que vous et tout ce que j'avais à faire était d'appeler le carrousel ("cycle") méthode après que j'ai initialisé le carrousel:

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>  

Je me rends compte que cette question est vieux, mais j'ai été googler ce soir en essayant de le comprendre moi-même et vu que personne ne l'avait correctement répondu. Top voté réponse ne sera pas démarrer automatiquement le carrousel, il ne fera que le cycle une fois qu'un bouton a été pressé, qui n'est pas ce que l'OP a été à la recherche pour.

$('.carousel').carousel({
  interval: 2000
})

Dans le Bootstrap 3.0, ce qui peut être accompli par l'ajout d'une "data-ride" attribut le carrousel contenant:

...

si aucune de ces solutions ne fonctionne pour vous.
essayez ceci:

$(document).ready(function () {
  function playcarousel(){
    $('.carousel-control.right').trigger('click');
  } 
  window.setInterval(playcarousel, 4000); 
});

Vous ne savez pas si vous avez obtenu ce triées, mais j'ai eu ce problème aussi. Je l'ai résolu en les enveloppant le carrousel de l'intervalle de paramètre dans une fonction comme ceci:

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

C'est la solution qui a fonctionné pour moi, basé sur Jesse Carter, la réponse à cette question. Je n'ai aucune idée de pourquoi cela fonctionne, mais pour quelque raison il a besoin de 2 appels, l'un dans le document dot prêt et l'autre à l'extérieur. Si je supprime l'un d'eux, puis quelque chose se passe mal, par exemple, la pause de la fonctionnalité ne peut pas être fait pour fonctionner correctement, ou l'automatique à vélo. Suite à cela, l'intervalle ne semble travailler à l'intérieur de la doc.prêt. Commentaires à partir de javascript têtes de la plupart de bienvenue 😉 mais je soupçonne que ce domaine de T. B. n'est pas totalement exempt de bugs! Je suis en utilisant 2.0.2 qui je sais, c'est un peu en retard ( la version actuelle est maintenant 2.0.4) mais je ne vois pas de changements à ce secteur

jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();

La bonne façon de régler ce problème est d'ajouter la fonction "active" de la classe à la première image dans le carrousel tout en le créant. Cela rendra le carrousel commencez à faire du vélo dès que possible.

Voici un exemple:

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

    <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>