Comment puis-je contrôler la vitesse à laquelle le carrousel bootstrap glisse dans les éléments ?

Question

Je vois que vous pouvez définir l'intervalle mais je veux contrôler la vitesse à laquelle les éléments glissent ?

   // Sets interval...what is transition slide speed?
    $('#mainCarousel').carousel({
    interval: 3000
});

Answer 1

La vitesse ne peut pas être contrôlée par l'API. Cependant, vous pouvez modifier le CSS qui s'en charge. Dans l carousel.less recherche de fichiers

.item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);
}

et le changement .6s à ce que vous voulez.

---

Si vous n'utilisez pas .less, trouvez dans le fichier bootstrap.css fichier :

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

et le changement 0.6s à l'heure que vous voulez. Vous pouvez également modifier l'heure dans l'appel de fonction ci-dessous :

.emulateTransitionEnd(2000) 

à l'adresse bootstrap.js en fonction Carousel.prototype.slide . Cela synchronise la transition et empêche la diapositive de disparaître avant la fin de la transition.

EDIT 7/8/2014

Comme @YellowShark l'a souligné, les modifications en JS ne sont plus nécessaires. Appliquez uniquement les modifications css.

EDIT 20/8/2015 Maintenant, après avoir modifié votre fichier css, il vous suffit de modifier CAROUSEL.TRANSITION_DURATION (dans bootstrap.js) ou c.TRANSITION_DURATION (si vous utilisez bootstrap.min.js) et de changer la valeur qu'il contient (600 par défaut). La valeur finale doit être la même que celle que vous avez mise dans votre fichier css (par exemple 10s en css = 10000 en .js).

MODIFIER 16/01/2018 Pour Bootstrap 4, pour modifier le temps de transition à 2 secondes par exemple, ajoutez

$(document).ready(function() {
  jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000  // 2 seconds
});

dans le fichier JS de votre site, et

.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}

dans le fichier CSS de votre site.

Answer 2

Il suffit d'écrire data-interval en el div contenant le carrousel :

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

Exemple tiré de w3schools .

Answer 3

Vous devez définir l'intervalle dans le DIV principal comme balise data-interval. Cela fonctionnera bien et vous pourrez donner un temps différent à chaque diapositive.

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

Answer 4

Pour Twitter Bootstrap 3 :

Vous devez modifier la transition CSS comme indiqué dans l'autre réponse :

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

De 0,6 seconde à 1,5 seconde (par exemple).

Mais aussi, il y a du Javascript à changer. Dans le bootstrap.js il y a une ligne :

.emulateTransitionEnd(600)

Cette valeur doit être remplacée par la quantité correspondante de millisecondes. Ainsi, pour 1,5 seconde, vous devez changer le nombre en 1500 :

.emulateTransitionEnd(1500)

Answer 5

Avec Bootstrap 4, il suffit d'utiliser ce CSS :

.carousel .carousel-item {
    transition-duration: 3s;
}

Changement 3s à la durée de votre choix.