Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

Bootstrap: Slide Geschwindigkeit ändern

#Tutorials#jQuery

Möchte man die Slide-Geschwindigkeit von Bootstrap Carousel ändern, so findet man hierfür keine Einstellungsmöglich als data-Attribut oder beim Aufrufen der Funktion via Javascript. Der Grund dafür ist, dass dies mit CSS3 Animation gelöst wurde und dafür muss man also nur die Transition Zeit anpassen. Hier mal ein Beispiel für einen Slide mit 0.6s also 600MS Laufzeit. Dies kann natürlich angepasst werden, wie man es möchte.


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

Kommentare

  • Sonja
    Hallo Andre,
    vielen Dank für den tollen Tipp! Weißt Du zufällig auch, wo man hinfassen muss, damit das Bild ein wenig länger stehen bleibt im Slider?
    Lieber Gruß
    Sonja
    Antworten
  • Christine
    Vielen Dank!
    Hab danach gesucht, sehr nützlich!
    Antworten
    • Andre Rinas
      Freut mich, wenn ich dir helfen konnte ;)
      Antworten

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.