web-dev-qa-db-fra.com

Comment changer le temps d'intervalle sur le carrousel bootstrap?

J'ai un carrousel de démarrage sur ma page Web, j'essaie d'augmenter l'intervalle de temps entre chaque diapositive. Le délai par défaut de 5000 millisecondes est trop rapide, il me faut environ 10 secondes.

javascripthtmlhtml5css3twitter-bootstrap
29
Alan

Vous pouvez utiliser les options lors de l’initialisation du carrousel, comme ceci:

// interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$('.carousel').carousel({
  interval: 1000 * 10
});

ou vous pouvez utiliser l'attribut interval directement sur la balise HTML, comme ceci:

<div class="carousel" data-interval="10000">

L’avantage de cette dernière approche est qu’il n’est pas nécessaire d’écrire de JS, ce qui vous permet de calculer l’intervalle et de l’initialiser avec une valeur variable au moment de l’exécution.

72
ochi

Vous pouvez également utiliser l'attribut data-interval, par exemple. <div class="carousel" data-interval="10000">

114
Deryck
        You need to set interval in  main div as data-interval tag .
        so it is working fine and you can give different time to different slides.

       <!--main div -->
      <div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
  <!-- Indicators -->
  <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
                             i>
                                            </ol>

  <!-- Wrapper for slides -->
  <div role="listbox" class="carousel-inner">
       <div class="item">
          <a class="carousel-image" href="#">
           <img alt="image" src="image.jpg">
          </a>
        </div>
    </div>
 </div>
5
Ali Umair

Le meilleur moyen de s'en débarrasser consiste à ajouter ou à modifier l'attribut data-interval comme ceci:

<div data-ride="carousel" class="carousel slide" data-interval="10000" id="myCarousel">

C'est spécifié sur ms comme d'habitude sur js, donc 1000 = 1s, 3000 = 3s ... 10000 = 10s.

Par ailleurs, vous pouvez également le spécifier à 0 pour ne pas glisser automatiquement. C'est utile pour afficher des images de produits sur un mobile, par exemple.

<div data-ride="carousel" class="carousel slide" data-interval="0" id="myCarousel">
3
JoelBonetR

Vous pouvez simplement utiliser l'attribut data-interval de la classe carousel.

Sa valeur par défaut est définie sur data-interval="3000" c'est-à-dire 3 secondes.

Tout ce que vous avez à faire est de le configurer selon vos besoins.

0
Tahir77667