Twitter Bootstrap Carrousel ne démarre pas automatiquement

en supposant que vous avez tout le reste en place, essayez d'ajouter ceci avant la balise de fermeture du corps:

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

j'ai eu le même problème et trouvé la solution; Comme nous mettons tous les deux les javascripts à la fin de la page, l'appel de la fonction doit être mis après eux:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $('#myCarousel').carousel({ interval: 3000, cycle: true });
  }); 
</script>

http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

J'ai pensé ajouter quelque chose à propos de bootstrap 3 travaillant en angle.

selon l'étendue de votre application est dans L'angle, il pourrait y avoir un léger retard dans le moment où le carrousel charge. Par exemple, j'ai le chargement du Carrousel comme modèle, qui charge légèrement après le chargement du document, donc, j'ai dû ajouter un léger délai pour le code de démarrage du Carrousel.

        <div class="mWeb-container" ng-controller="mWebCtrl">
        <div ng-include="nav_tpl" ng-hide="print_layout"></div>
        <div ng-include="carousel_tpl" ng-hide="print_layout"></div>
        <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
        <div ng-view=""></div>
        <div ng-include="comments_tpl" ng-hide="print_layout"></div>
        <div ng-include="footer_tpl" ng-hide="print_layout"></div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            var mCarouselTO = setTimeout(function(){
            $('#Carousel').carousel({
                interval: 3000,
                cycle: true,
            }).trigger('slide');
            }, 2000);
            var q = mCarouselTO;
        });
    -->
    </script>

j'ai eu le même problème donc j'ai trouvé que j'ai raté le data-ride="carousel" à partir du bootstrap caruosel. Vérifiez ça dans votre code. Lien vers le Bootstrap doc

pas besoin de code javascript, vous pouvez le modifier automatiquement en utilisant l'attribut datadata-interval="1000"

le délai entre le cycle automatique d'un article. Si faux, carousel ne roulera pas automatiquement.

<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel">

http://getbootstrap.com/javascript/#carousel

j'ai été assis pendant des mois sur ce, chaque fois que j'ai précompilé les actifs quelque chose de mal est allé dans le public des actifs/dossier donc quelque chose ne fonctionnait pas. J'avais besoin de copier de vieux biens dans le dossier public/biens pour le faire fonctionner. Pendant longtemps j'ai essayé de comprendre dans quel ordre les importations doivent être et qui exigent des déclarations détruisent déjà des choses de travail.

Ma solution après tout ce temps, j'ai besoin d'en importer:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

Et ne pas vous avez déjà mis un script, par exemple un script start-carousel dans l'application.fichier js. Si je le place dans la demande.HTML.fichier erb comme ceci:

<%= javascript_include_tag "application" %>

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

Tout fonctionne très bien. Avis: c'chapeau l'application include_tag otherwise I can't work.

Remarque 2: j'ai aussi un script googlemaps, mais c'est seulement(!) importé dans le fichier où vit la carte. C'est ce script:

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>

j'espère vraiment que cela aide d'autres personnes à épargner de leur temps. Il y a des choses qui ne sont pas si évidentes.

Ce qui m'est arrivé. Mais - il y a une option qui est pause: 'hover' qui est le paramètre par défaut.

et cette option a fait mon fullscreen slider pour s'arrêter bien sûr, même sur la première diapositive ;) S'il vous plaît, mettez votre pause sur false ou autre chose que "hover".

Juste à ajouter pour ceux d'entre vous qui sont à l'aide de réagir, de faire ce qui suit va déclencher le cycle:

componentDidMount(){
    this.setState({activeIndex:0})
}