Bootstrap 3 carrousel vitesse de transition

Je suis confronté à un problème.

J'ai essayé de faire ce qui suit:

.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;
}


In the bootstrap.js:

.emulateTransitionEnd(600)

Mais il ne semble pas fonctionner correctement. L'animation des vitesses. Mais j'utilise un carousel-caption qui contient du texte, qui bugs. Elle glisse correctement, mais alors la .contenu de la légende se déplace tout le chemin à gauche, disparaît et apparaît dans sa position normale.

Est-il de toute autre variable j'ai besoin de changer?

OriginalL'auteur | 2013-12-30

  1. 12

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

    Ajouter le texte suivant à la fin de votre code html fichier pour régler la vitesse de transition: 10000 (10sec)

     <script src="../../dist/js/bootstrap.min.js"></script>  
 <script>
  $('.carousel').carousel({
   interval: 10000
  });
 </script>
    Qui définit le temps le manège s'arrête sur chaque diapositive, mais je ne pense pas que cela ait quelque chose à voir avec la façon dont rapidement une diapositive particulière va et vient, qui est ce que l'OP n'a pas de demander.
    Peut-être pas directement liés, mais la syntaxe peut également s'appliquer à l'autre carrousel propriétés. J'étais à la recherche d'un moyen de modifier la vitesse de transition et de cet extrait fonctionne comme un charme! Assurez-vous de mettre la deuxième partie de script après le code html qui initialise le carrousel sinon pas de chance.
    Ce n'est pas une réponse à la question. C'est le intervalle entre les images, pas le transition temps (le temps pendant lequel l'animation de diapositives qui se passe).
    s'il vous plaît comprendre qu'est-ce que la question avant d'écrire la réponse

    OriginalL'auteur jbiWeisendorf

  2. 8

    Ici est la manière très simple;

    Ajouter "data-interval="2000" dans le code html. par exemple:<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

    Ce n'est également pas le temps de transition, c'est le temps de pause sur les lames elles-mêmes.
    Sauriez-vous comment faire ajouter le data-interval pour chaque élément?

    OriginalL'auteur Ajeesh Joseph

  3. 3

    Pour modifier la vitesse, pas le temps de transition, depuis que j'utilise de moins en MOINS, j'ai trouvé d'ajouter ce point à mon habitude.moins (ce qui importe tous les autres bootstrap MOINS de fichiers en premier) de travail:

    @slideSpeed: 2s
.carousel-inner {
    > .item {
        .transition(@slideSpeed ease-in-out left);
        @media all and (transform-3d), (-webkit-transform-3d) {
            transition: transform @slideSpeed ease-in-out;
        }
    }
}

    J'espère que cela aide quelqu'un comme @ToolmakerSteve ou de moi-même dans l'avenir.

    S'avère qu'il y est une constante dans l'bootstrap.js que j'ai dû changer une option (voir "durée" ci-dessous)

      Carousel.DEFAULTS = {
  interval: 5000,
  pause: 'hover',
  wrap: true,
  keyboard: true,
  duration: 600
}

    et remplacer:

        //.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
    .emulateTransitionEnd(this.options.duration)

    Alors, je peux ajouter des données-durée="1000" au balisage.

    C'est la seule méthode correcte et fonctionne pour bootstrap 3.3.7 trop.

    OriginalL'auteur Randy Slavey

  4. 0

    Ceux utilisant bootstrap 4 scss pouvez utiliser cette variable 🙂

    $carousel-transition:           transform .6s ease-in-out !default;

    OriginalL'auteur Robbie McFarlane

  5. 0

    Cela fonctionne pour moi, dans le Bootstrap 4.1

    #MyCarousel .carousel-item {
    transition: transform 1s ease-in-out;
    }

    Changement 1s pour une durée indéterminée.
    À l'aide d'un id de votre carrousel va automatiquement remplacer Bootstrap, et vous permet d'utiliser des vitesses différentes pour les différents manèges.

    OriginalL'auteur ratnadhatamam

  6. -1
    .carousel-inner>.item {
-webkit-transition: 0.9s ease-in-out left;
transition: 0.9s ease-in-out left;
-webkit-transition: 0.9s, ease-in-out, left;
-moz-transition: .9s, ease-in-out, left;
-o-transition: .9s, ease-in-out, left;
transition: .9s, ease-in-out, left;
}

    OriginalL'auteur The EasyLearn Academy