web-dev-qa-db-fra.com

Comment puis-je faire en sorte que le carrousel Bootstrap js se répète automatiquement dès le chargement de la page?

Utilisation de bootstrap.js version 2.02

J'essaie de faire en sorte que le Twitter Bootstrap Carousel se mette automatiquement à cycle dès qu'une personne visite mon site. Pour le moment, le cycle automatique ne fonctionne que lorsque vous cliquez au moins une fois sur l’un des boutons de cycle. 

Je veux que le carrousel commence immédiatement à faire du vélo à l’intervalle.

Est-ce que quelqu'un sait comment faire ça? 

Mon site est hotairraccoon.com

Vous verrez comment, après avoir cliqué une fois sur le carrousel, celui-ci commence à faire cycle toutes les 5 secondes environ, mais je ne veux pas que le clic soit nécessaire pour afficher le contenu du carrousel.

Merci!

javascripttwitter-bootstrapcarousel
25
Jonathan Larkin

Remarque: comme indiqué dans les commentaires, cette solution fonctionnera correctement pour Bootstrap 2. Reportez-vous à la réponse de MattZ pour savoir comment obtenir le même comportement sous Bootstrap 3. 

J'avais le même problème que vous et tout ce que je devais faire pour résoudre ce problème était d'appeler la méthode du carrousel (cycle) après avoir 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 ancienne mais j’étais en train de googler ce soir en essayant de la comprendre moi-même et j’ai vu que personne n’y avait répondu correctement. La réponse la plus votée ne lancera pas automatiquement le carrousel, elle ne se répétera qu'une fois qu'un bouton aura été pressé, ce qui n'est pas ce que recherchait l'OP.

44
Jesse Carter

Dans Bootstrap 3.0, cela peut être accompli en ajoutant un attribut «data-ride» au conteneur du carrousel:

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        ...
    </div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L210

40
Matt Zuba
$('.carousel').carousel({
  interval: 2000
})
9
Straseus

Le fichier jquery.js doit être chargé avant le fichier bootstrap.js, qu’ils soient placés dans les balises head ou à la fin de votre fichier. 

<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>
4
Stephen Whitehead

Dans Bootstrap 3.0, cela peut être accompli en ajoutant un attribut «data-ride» au conteneur du carrousel:

3
Mazen Shaheed

Essayez d’initialiser votre carrousel comme ceci:

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

si aucune de ces solutions ne fonctionne pour vous. essaye ça:

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

Je ne sais pas si vous avez réglé ce problème, mais je rencontrais aussi ce problème. Je l'ai résolu en encapsulant le paramètre d'intervalle du carrousel dans une fonction comme celle-ci:

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

Il existe un autre moyen de réutiliser automatiquement le carrousel bootstrap. 

utilisezdata-ride="carousel"attribut. Il indique au bootstrap de commencer à animer le carrousel dès le chargement de la page.

1
Rohit Waghela

Une solution simple et rapide consiste à cliquer par programme sur le bouton du document prêt:

$(function() {
  $(".right.carousel-control").click();
});

BTW: assurez-vous de charger jQuery avant les autres scripts faisant référence à $, vous avez maintenant deux Uncaught ReferenceError: $ is not defined car vous appelez $ sur les lignes 101 et 182, mais jquery est chargé en premier sur la ligne 243.

Je recommanderais d'utiliser un outil tel que firebug ou un outil de développement (chrome/safari) pour corriger ces erreurs.

EDIT: Je pense que vous avez déjà une solution qui fonctionne, mais parce que vous utilisez jquery avant son chargement, cela ne fonctionne pas.

1
ebaxt
    <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>
0
Zeeba

Bien qu'il y ait sans aucun doute des réponses correctes ici, je voulais juste ajouter que vous pouvez reproduire le comportement exact décrit par l'affiche en ajoutant des erreurs à votre code. Supprimez les points-virgules ou la balise de script de fin, par exemple, et le carrousel ne jouera plus automatiquement.

La première chose à faire est donc de rechercher les erreurs dans votre console javascript!

0
ippi

Essaye ça.

$(document).ready(function ()
{
    $('.carousel').carousel({interval:5000,pause:false});
});
0
Laércio_Kelson

C'est la solution qui a fonctionné pour moi, basée sur la réponse de Jesse Carter à cette question. Je ne sais pas pourquoi cela fonctionne, mais pour une raison quelconque, il a besoin de 2 appels, l'un à l'intérieur du document et l'autre à l'extérieur. Si je supprime l’un d’eux, alors quelque chose ne va pas, par exemple la fonctionnalité de pause ne peut plus fonctionner correctement, ou le cycle automatique. De plus, l'intervalle ne semble fonctionner que dans le document doc.ready. Les commentaires de javascript sont les bienvenus ;-) mais je soupçonne que cette zone de T.B. n'est pas entièrement sans bug! J'utilise 2.0.2, ce qui est un peu en retard (la version actuelle est 2.0.4 ), mais je ne vois aucun changement dans ce domaine. 

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

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

La bonne façon de résoudre ce problème consiste à ajouter la classe "active" à la première image du carrousel lors de sa création. Cela fera que le carrousel commence à 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>
0
Vishal Sood