web-dev-qa-db-fra.com

Bootstrap 3 vitesse de transition du carrousel

Je rencontre 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 cela ne semble pas fonctionner correctement. L'animation s'accélère. Mais j'utilise une légende de carrousel qui contient du texte, qui bogues. Il glisse correctement, mais la légende .content-move se déplace complètement à gauche, disparaît et apparaît dans sa position normale.

Y a-t-il une autre variable que je dois changer?

csstwitter-bootstrapcarousel
8
user1185135

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

Ajoutez ce qui suit à la fin de votre fichier HTML pour définir la vitesse de transition: 10000 (10sec)

 <script src="../../dist/js/bootstrap.min.js"></script>  
 <script>
  $('.carousel').carousel({
   interval: 10000
  });
 </script>
12
jbiWeisendorf

Voici le moyen très simple;

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

7
Ajeesh Joseph

Pour modifier la vitesse réelle des diapositives, et non le temps de transition, car j'utilise LESS, j'ai ajouté que l'ajout de cette option à mon fichier custom.less (qui importe d'abord tous les autres fichiers bootstrap LESS) a fonctionné:

@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 aidera quelqu'un comme @ToolmakerSteve ou moi-même à l'avenir.

Il s'avère qu'il y a une constante dans le fichier bootstrap.js que je devais également changer en 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)

Ensuite, je peux ajouter data-duration = "1000" à mon balisage.

3
Randy Slavey

Cela fonctionne pour moi dans Bootstrap 4.1

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

Changez les 1s pour n’importe quelle durée ... Utiliser un identifiant pour votre carrousel annulera automatiquement Bootstrap et vous permettra d’utiliser différentes vitesses pour différents carrousels.

0
ratnadhatamam

Ceux qui utilisent bootstrap 4 scss peuvent utiliser cette variable :)

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