Bootstrap 5 Carousel

Carrousel / Diashow

Een carrousel (roterende diorama) is een presentatie van elementen die in een cirkel worden afgespeeld:

Hoe je een carrousel maakt

Hier wordt getoond hoe je een basis carrousel maakt met indicatoren en bedieningsknoppen:

Voorbeeld

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators/Points -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- Slides/Carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- Links/Icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Probeer het zelf

Voorbeeldverklaring

Beschrijving van de werking van elke class in het voorbeeld:

Class Beschrijving
.carousel Maak een carrousel.
.carousel-indicators Voeg indicatoren toe aan de carrousel. Ze zijn de kleine punten onder elk dia.
Stelt het aantal dia's in de carrousel voor en waar de gebruiker momenteel naar kijkt.
.carousel-inner Voeg de dia toe aan de carrousel.
.carousel-item Stel de inhoud van elk dia in.
.carousel-control-prev Voeg een naar-links (vorige) knop toe aan de carrousel, zodat gebruikers door de dia's kunnen navigeren.
.carousel-control-next Voeg een naar-rechts (volgende) knop toe aan de carrousel, zodat gebruikers door de dia's kunnen navigeren.
.carousel-control-prev-icon Gebruik samen met .carousel-control-prev om een 'vorige' knop te maken.
.carousel-control-next-icon Gebruik samen met .carousel-control-next om een 'volgende' knop te maken.
.slide Voeg CSS-overgangen en animatie-effecten toe wanneer je van een project naar het volgende schuift.
Als je dit effect niet wilt, verwijder dan dit type.

Voeg een titel toe aan de dia

Voeg een titel toe aan elke <div class="carousel-item"> Binnen <div class="carousel-caption"> Voeg een element toe binnen, maak een titel voor elk dia aan:

Voorbeeld

<div class="carousel-item">
  <img src="beijing.jpg" alt="Peking">
  <div class="carousel-caption">
    <h3>Peking</h3>
    <p>Bedankt, Peking!</p>
  </div>
</div>

Probeer het zelf