So ändern Sie die Übergangsgeschwindigkeit des Bootstrap-Carousels (Zeitintervall)

Bootstrap ist eines der beliebtesten und leichtesten HTML/CSS/JavaScript-Frameworks für Entwickler.
Es wird häufig für Bild-Slider, Hero-Banner und sogar WordPress-Themes verwendet.
Das Bootstrap-Carousel eignet sich hervorragend, um Bilder oder Inhalte flüssig und responsiv darzustellen.

Standardmäßig wechselt das Carousel automatisch in einem festen Intervall, doch Sie können die
Slider-Geschwindigkeit an Ihr Design anpassen – schneller für Bildvorschauen,
langsamer für erzählerische Slideshows. Im Folgenden erfahren Sie, wie Sie das
Zeitintervall einstellen und die Animationsdauer mit wenigen CSS-Zeilen anpassen.

Änderungen an den Bootstrap-Kerndateien sind nicht nötig. Passen Sie einfach Ihr HTML und CSS an.

Zeitintervall des Bootstrap-Carousels einstellen

Hier das Standard-Snippet des Carousels:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
    <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
  </div>
  
  <!-- Left and right controls --> 
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a> 
</div>

data-interval hinzufügen

Steuern Sie die Anzeigedauer pro Slide, indem Sie data-interval am Wrapper setzen:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>

• 1000 = 1 Sekunde
• 3000 = 3 Sekunden
• Ersetzen Sie 3000 durch Ihr gewünschtes Intervall.

So steuern Sie einfach die Carousel-Geschwindigkeit auf responsiven Websites.

Animationsdauer per CSS ändern

Das Intervall regelt die Anzeigedauer, die Animation selbst können Sie ebenfalls anpassen.
Standardmäßig nutzt Bootstrap 0,6 Sekunden. Für langsamere Übergänge erhöhen Sie den Wert im CSS.

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

Hier sind es 1,2 Sekunden. Passen Sie die Dauer an Ihren Effekt an.

Warum die Geschwindigkeit anpassen?

• User Experience: längere Slides für Storytelling und Highlights.
• E-Commerce: schnellere Slides für Produktvorschauen.
• SEO & Engagement: flüssige Interaktionen fördern Verweildauer.
• WordPress-Themes: viele Themes basieren auf Bootstrap; gleicher Ansatz.

Fazit

Das Bootstrap-Carousel ist simpel, responsiv und breit unterstützt.
Mit angepasstem Intervall und Transitionsdauer sticht Ihr Slider
im Portfolio, Blog oder Shop deutlich hervor.