De overgangssnelheid van de Bootstrap-carousel aanpassen (tijdsinterval)

Bootstrap is een van de populairste en lichtste HTML/CSS/JavaScript-frameworks voor ontwikkelaars.
Het wordt vaak gebruikt voor beeldsliders, hero-banners en zelfs WordPress-thema’s.
De Bootstrap-carousel is ideaal om afbeeldingen of content vloeiend en responsief te tonen.

Standaard wisselt de carousel automatisch met een vaste interval, maar je kunt de
slidersnelheid afstemmen op je ontwerp: sneller voor beeldvoorbeelden,
of trager voor verhalende slideshows. Hieronder leer je hoe je het
tijdsinterval instelt en de animatieduur verfijnt met enkele regels code.

Je hoeft de kernbestanden van Bootstrap niet te wijzigen. Pas eenvoudig je HTML en CSS aan.

Tijdsinterval voor de Bootstrap-carousel instellen

Dit is het standaard-snippet van de carousel:

<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` toevoegen

Stel de weergaveduur per slide in door data-interval op de wrapper te zetten:

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

1000 = 1 seconde
3000 = 3 seconden
Vervang 3000 door het gewenste interval.

Dit is de eenvoudigste manier om de carouselsnelheid op een responsive site te bepalen.

Animatieduur in CSS aanpassen

Het interval bepaalt hoe lang een slide zichtbaar blijft, maar je kunt ook de
overgangsanimatie zelf aanpassen. Standaard gebruikt Bootstrap 0,6 seconde.
Voor een langzamere fade of slide verhoog je de tijd in je 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 staat het op 1,2 seconde. Pas aan naar het gewenste effect.

Waarom de snelheid aanpassen?

Gebruikerservaring: langere slides voor storytelling of highlights.
E-commerce: snellere slides voor productverkenning.
SEO & engagement: vloeiendere interacties verlengen vaak de sessies.
WordPress-thema’s: veel thema’s gebruiken Bootstrap; zelfde aanpak.

Conclusie

De Bootstrap-carousel is eenvoudig, responsief en breed ondersteund.
Met een aangepast interval en animatieduur springt je slider eruit
op portfolio’s, blogs en shops.