Bootstrap 5.2 / Componenten

Carousel

Een slideshow-component om door elementen — afbeeldingen of tekstslides — te bladeren, als een carrousel.

Hoe het werkt

De carousel is een slideshow om door een reeks content te bladeren, gebouwd met CSS 3D-transforms en een beetje JavaScript. Hij werkt met een reeks afbeeldingen, tekst of eigen markup. Er is ook ondersteuning voor vorige/volgende-bedieningselementen en indicatoren.

In browsers die de Page Visibility API ondersteunen, schuift de carousel niet door wanneer de webpagina niet zichtbaar is voor de gebruiker (bijvoorbeeld wanneer het browsertabblad inactief is of het browservenster geminimaliseerd is).

Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Houd er rekening mee dat geneste carousels niet worden ondersteund en dat carousels over het algemeen niet aan toegankelijkheidsstandaarden voldoen.

Voorbeeld

Carousels normaliseren de afmetingen van slides niet automatisch. Je moet daarom mogelijk extra utilities of eigen stijlen gebruiken om content goed af te meten. Hoewel carousels vorige/volgende-bedieningselementen en indicatoren ondersteunen, zijn die niet expliciet verplicht. Voeg ze naar eigen inzicht toe en pas ze aan.

De klasse .active moet aan een van de slides worden toegevoegd, anders is de carousel niet zichtbaar. Stel ook een unieke id op de .carousel in voor optionele bedieningselementen, zeker als je meerdere carousels op één pagina gebruikt. Bedienings- en indicatorelementen moeten een data-bs-target-attribuut hebben (of href bij links) dat overeenkomt met de id van het .carousel-element.

Alleen slides

Hier is een carousel met alleen slides. Let op de aanwezigheid van .d-block en .w-100 op carousel-afbeeldingen, om de standaard beelduitlijning van de browser te voorkomen.

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

Met bedieningselementen

Nu met de vorige- en volgende-bedieningselementen erbij. We raden aan <button>-elementen te gebruiken, maar je kunt ook <a>-elementen met role="button" gebruiken.

HTML

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Met indicatoren

Je kunt naast de bedieningselementen ook indicatoren aan de carousel toevoegen.

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Met bijschriften

Voeg eenvoudig bijschriften aan je slides toe met het element .carousel-caption binnen een .carousel-item. Ze zijn eenvoudig te verbergen op kleinere viewports, zoals hieronder te zien is, met optionele display-utilities. We verbergen ze eerst met .d-none en halen ze op medium apparaten terug met .d-md-block.

HTML

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Label van eerste slide</h5>
        <p>Wat representatieve opvulcontent voor de eerste slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Label van tweede slide</h5>
        <p>Wat representatieve opvulcontent voor de tweede slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Label van derde slide</h5>
        <p>Wat representatieve opvulcontent voor de derde slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Crossfade

Voeg .carousel-fade aan je carousel toe om slides met een fade-transitie in plaats van een schuifbeweging te animeren. Afhankelijk van je carousel-content (bijv. slides met alleen tekst) wil je misschien .bg-body of wat eigen CSS aan de .carousel-items toevoegen voor een goede crossfade.

HTML

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Interval per `.carousel-item`

Voeg data-bs-interval="" aan een .carousel-item toe om te wijzigen hoe lang er gewacht wordt voordat er automatisch naar het volgende item wordt doorgeschoven.

HTML

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Swipen uitschakelen

Carousels ondersteunen op touchscreen-apparaten naar links/rechts swipen om tussen slides te wisselen. Dat kun je uitschakelen met het attribuut data-bs-touch. Het onderstaande voorbeeld bevat ook geen data-bs-ride-attribuut, dus het speelt niet automatisch af.

HTML

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23555%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23444%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23333%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Donkere variant

Voeg .carousel-dark aan de .carousel toe voor donkerdere bedieningselementen, indicatoren en bijschriften. De bedieningselementen zijn met de CSS-eigenschap filter geïnverteerd ten opzichte van hun standaard witte vulling. Bijschriften en bedieningselementen hebben extra Sass-variabelen om de color en background-color aan te passen.

HTML

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22First%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23f5f5f5%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23aaa%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="First slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Label van eerste slide</h5>
        <p>Wat representatieve opvulcontent voor de eerste slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Second%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23eee%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23bbb%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Second slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Label van tweede slide</h5>
        <p>Wat representatieve opvulcontent voor de tweede slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Third%20slide%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e5e5e5%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23999%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%22100%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fsvg%3E" width="800" height="400" class="bd-placeholder-img-lg d-block w-100" alt="Third slide">
      <div class="carousel-caption d-none d-md-block">
        <h5>Label van derde slide</h5>
        <p>Wat representatieve opvulcontent voor de derde slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Vorige</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Volgende</span>
  </button>
</div>

Eigen transitie

De transitieduur van .carousel-item kun je vóór het compileren wijzigen met de Sass-variabele $carousel-transition-duration, of met eigen stijlen als je de gecompileerde CSS gebruikt. Pas je meerdere transities toe, zorg er dan voor dat de transform-transitie als eerste gedefinieerd is (bijv. transition: transform 2s ease, opacity .5s ease-out).

Sass

Variabelen

Variabelen voor alle carousels:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Variabelen voor de donkere carousel:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Gebruik

Via data-attributen

Gebruik data-attributen om de positie van de carousel eenvoudig te sturen. data-bs-slide accepteert de sleutelwoorden prev of next, die de slide-positie ten opzichte van de huidige positie wijzigen. Je kunt ook data-bs-slide-to gebruiken om een ruwe slide-index aan de carousel mee te geven, data-bs-slide-to="2", waarmee de slide-positie naar een bepaalde index verschuift, beginnend bij 0.

Het attribuut data-bs-ride="carousel" wordt gebruikt om een carousel te markeren die vanaf het laden van de pagina animeert. Gebruik je data-bs-ride="carousel" niet om je carousel te initialiseren, dan moet je hem zelf initialiseren. Het kan niet gecombineerd worden met (overbodige en onnodige) expliciete JavaScript-initialisatie van dezelfde carousel.

Via JavaScript

Roep de carousel handmatig aan met:

const carousel = new bootstrap.Carousel('#myCarousel')

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Naam	Type	Standaard	Omschrijving
`interval`	number	`5000`	Hoe lang er gewacht wordt voordat er automatisch naar een volgend item wordt doorgeschoven.
`keyboard`	boolean	`true`	Of de carousel op toetsenbordgebeurtenissen moet reageren.
`pause`	string, boolean	`"hover"`	Bij `"hover"` pauzeert het doorschuiven van de carousel bij `mouseenter` en gaat het verder bij `mouseleave`. Bij `false` pauzeert hoveren over de carousel hem niet. Op apparaten met aanraakbediening pauzeert het doorschuiven bij `"hover"` na `touchend` (zodra de gebruiker klaar is met de carousel) gedurende twee intervallen, waarna het automatisch weer verdergaat. Dit komt bovenop het muisgedrag.
`ride`	string, boolean	`false`	Bij `true` speelt de carousel automatisch af nadat de gebruiker het eerste item handmatig heeft doorgeschoven. Bij `"carousel"` speelt de carousel bij het laden automatisch af.
`touch`	boolean	`true`	Of de carousel swipen naar links/rechts op touchscreen-apparaten moet ondersteunen.
`wrap`	boolean	`true`	Of de carousel continu moet doorlopen of harde eindpunten moet hebben.

Methodes

Gevaar

Deze methode start een overgang. Roep hem niet opnieuw aan zolang de vorige nog bezig is: dat levert onverwacht gedrag op. Wacht op het bijbehorende gebeurtenis voordat je opnieuw aanroept.

Je kunt een carousel-instantie maken met de carousel-constructor, bijvoorbeeld om hem met aanvullende opties te initialiseren en door de items te laten schuiven:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Methode	Omschrijving
`cycle`	Schuift van links naar rechts door de carousel-items.
`dispose`	Vernietigt de carousel van een element. (Verwijdert opgeslagen gegevens van het DOM-element)
`getInstance`	Statische methode waarmee je de carousel-instantie kunt ophalen die bij een DOM-element hoort; je gebruikt hem zo: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een carousel-instantie teruggeeft die bij een DOM-element hoort, of een nieuwe aanmaakt als die nog niet was geïnitialiseerd. Je gebruikt hem zo: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Schuift door naar het volgende item. Keert terug naar de aanroeper voordat het volgende item getoond is (dus vóór de gebeurtenis `slid.bs.carousel`).
`nextWhenVisible`	Schuift de carousel niet naar het volgende item wanneer de pagina niet zichtbaar is, of wanneer de carousel of zijn bovenliggende element niet zichtbaar is. Keert terug naar de aanroeper voordat het doelitem getoond is.
`pause`	Stopt het doorschuiven van de carousel door de items.
`prev`	Schuift door naar het vorige item. Keert terug naar de aanroeper voordat het vorige item getoond is (dus vóór de gebeurtenis `slid.bs.carousel`).
`to`	Schuift de carousel naar een bepaald frame (nulgebaseerd, net als bij een array). Keert terug naar de aanroeper voordat het doelitem getoond is (dus vóór de gebeurtenis `slid.bs.carousel`).

Gebeurtenissen

De carousel-klasse van Bootstrap stelt twee gebeurtenissen beschikbaar om op de carousel-functionaliteit in te haken. Beide gebeurtenissen hebben de volgende extra eigenschappen:

direction: de richting waarin de carousel schuift ("left" of "right").
relatedTarget: het DOM-element dat als actief item op zijn plek wordt geschoven.
from: de index van het huidige item
to: de index van het volgende item

Alle carousel-gebeurtenissen worden op de carousel zelf afgevuurd (dus op de <div class="carousel">).

Type gebeurtenis	Omschrijving
`slid.bs.carousel`	Wordt afgevuurd wanneer de carousel zijn schuiftransitie heeft voltooid.
`slide.bs.carousel`	Wordt direct afgevuurd wanneer de instantiemethode `slide` wordt aangeroepen.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // doe iets...
})

Carousel

Hoe het werkt

Voorbeeld

Alleen slides

Met bedieningselementen

Met indicatoren

Met bijschriften

Crossfade

Interval per .carousel-item

Swipen uitschakelen

Donkere variant

Eigen transitie

Sass

Variabelen

Gebruik

Via data-attributen

Via JavaScript

Opties

Methodes

Gebeurtenissen

Interval per `.carousel-item`