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?
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>
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">
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.
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.
Diejenigen, die Bootstrap 4 scss verwenden, können diese Variable verwenden :)
$carousel-transition: transform .6s ease-in-out !default;