web-dev-qa-db-fra.com

Twitter Bootstrap Le carrousel ne démarre pas automatiquement

J'ai un carrousel sur mon site qui a été créé avec Twitter Bootstrap. Je ne sais pas pourquoi il ne démarre pas automatiquement, mais lorsque la page se charge, il ne démarre pas jusqu'à ce que vous cliquiez sur la flèche pour passer à la diapositive suivante, puis le chronomètre entre en jeu. À partir de la documentation bootstrap, il est dit il peut être initialisé avec cet objet, mais où dois-je le mettre?

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

Mon site possède deux fichiers javascript, jquery-1.7.2.min.js et bootstrap.min.js.

javascripttwitter-bootstrapcarousel
20
Jashua

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>
34
David Taiaroa

enter image description here

J'ai eu votre même problème et j'ai trouvé la solution; Comme nous mettons tous les deux les javascripts à la fin de la page, l'appel de la fonction doit être placé 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/

9
Mujahidul Jahid

Je pensais que j'ajouterais quelque chose sur bootstrap 3 travaillant en angulaire.

Selon l'étendue de votre application dans Angular, il peut y avoir un léger retard dans le chargement du carrousel. Par exemple, j'ai le chargement du carrousel en tant que modèle, qui se charge légèrement après le chargement du document.Par conséquent, j'ai dû ajouter un léger délai pour que le code démarre le 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>
8
kronus

J'ai eu le même problème donc j'ai trouvé que j'avais manqué le data-ride="carousel" dans le bootstrap caruosel. Vérifiez cela dans votre code. Lien vers Bootstrap doc

3
Ali Madadi

Pas besoin de code javascript, vous pouvez le définir pour changer automatiquement en utilisant l'attribut de données data-interval="1000"

Temps de retard entre le cycle automatique d'un élément. S'il est faux, le carrousel ne cyclera pas automatiquement.

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

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

2
John Magnolia

Cela fait des mois que je m'assois là-dessus, chaque fois que je précompilais les actifs, quelque chose de mal allait dans le dossier public/actifs, donc quelque chose ne fonctionnait pas. J'avais besoin de copier les anciens actifs dans le dossier public/actifs pour le faire fonctionner. Pendant longtemps, j'ai essayé de déterminer dans quel ordre les importations doivent être et celles qui nécessitent des déclarations détruisent des choses qui fonctionnent déjà.

Ma solution après tout ce temps est, je dois importer ces derniers:

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

Et ne mettez jamais de script, par ex. un script start-carrousel dans le fichier application.js. Si je le place dans le fichier application.html.erb comme ceci:

<%= javascript_include_tag "application" %>

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

Tout fonctionne bien. Remarque: ça doit être nder l'application include_tag otherwhise je ne peux pas travailler.

Remarque 2: J'ai également un script googlemaps, mais il est seulement (!) Importé dans le fichier où réside 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 aidera les autres à gagner du temps. Il y a des choses qui ne sont pas si évidentes.

1
Niko

Cela 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 que mon curseur plein écran s'arrête bien sûr, même sur la première diapositive;) Veuillez donc définir votre pause sur faux ou autre chose que 'survoler'.

0
Martin Klasson

Juste pour ajouter à ceux d'entre vous qui utilisent React, faire ce qui suit déclenchera le cycle:

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