wake-up-neo.net

Bootstrap 3-Karussell-Übergangsgeschwindigkeit

Ich habe ein Problem.

Ich habe folgendes versucht:

.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)

Aber es scheint nicht richtig zu funktionieren. Die Animation wird schneller. Aber ich benutze eine Karussell-Beschriftung, die Text enthält, der Fehler enthält. Es gleitet ordentlich, aber die .content-Beschriftung wird ganz nach links verschoben, verschwindet und erscheint in ihrer normalen Position.

Gibt es eine andere Variable, die ich ändern muss?

8
user1185135

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

Fügen Sie Folgendes am Ende Ihrer HTML-Datei hinzu, um die Übergangsgeschwindigkeit einzustellen: 10000 (10sec)

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

Hier ist der sehr einfache Weg;

Fügen Sie "data-interval="2000" in der HTML-Datei hinzu. zB: <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000"> 

7
Ajeesh Joseph

Um die tatsächliche Foliengeschwindigkeit zu ändern, nicht die Übergangszeit, da ich LESS verwende, fand ich das Hinzufügen zu custom.less (das zuerst alle anderen Bootstrap-Dateien importiert, die LESS zuerst importiert):

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

Hoffentlich hilft dies jemandem wie @ToolmakerSteve oder mir in der Zukunft.

Es stellt sich heraus, dass es in der bootstrap.js eine Konstante gibt, die ich ebenfalls in eine Option ändern musste (siehe "Dauer" unten).

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

und ersetzen:

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

Dann kann ich meinem Markup datendauer = "1000" hinzufügen.

3
Randy Slavey

Dies funktioniert für mich in Bootstrap 4.1

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

Ändern Sie 1s auf eine beliebige Dauer. Wenn Sie eine ID für Ihr Karussell verwenden, wird Bootstrap automatisch überschrieben und Sie können verschiedene Geschwindigkeiten für verschiedene Karussells verwenden.

0
ratnadhatamam

Diejenigen, die Bootstrap 4 scss verwenden, können diese Variable verwenden :)

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