Bootstrap 5 Carousel

Carrousel/Diapositive

Un carrousel (diapositive) è utilizzato per visualizzare elementi in modo ciclico:

Come creare un carrousel

Esempio di come creare una carosello base con indicatori e controlli:

Esempio

<!-- Carrousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indici/pointi -->
  <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>
  <!-- Diapositive/Carrousel -->
  <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>
  <!-- Controlli/icone laterali -->
  <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>

Prova direttamente

Esempio di spiegazione

Descrizione dell'azione di ciascuna classe nell'esempio precedente:

Classe Descrizione
.carousel Crea una carosella.
.carousel-indicators Aggiungi indicatori alla carosella. Sono i punti piccoli alla base di ogni diapositiva.
Rappresenta il numero di diapositive nella carosella e quale diapositiva l'utente sta visualizzando.
.carousel-inner Aggiungi la diapositiva alla carosella.
.carousel-item Definisci il contenuto di ogni diapositiva.
.carousel-control-prev Aggiungi un pulsante a sinistra (precedente) alla carosella, permettendo agli utenti di tornare tra le diapositive.
.carousel-control-next Aggiungi un pulsante a destra (prossimo) alla carosella, permettendo agli utenti di passare tra le diapositive.
.carousel-control-prev-icon Usa insieme a .carousel-control-prev per creare il pulsante "Precedente".
.carousel-control-next-icon Usa insieme a .carousel-control-next per creare il pulsante "Prossimo".
.slide Aggiungi transizioni CSS e animazioni quando si scorre da un progetto all'altro.
Se non desideri questo effetto, elimina questo tipo.

Aggiungi un titolo alla diapositiva

Aggiungi un titolo per ogni <div class="carousel-item"> interno <div class="carousel-caption"> Aggiungi elementi all'interno, crea un titolo per ogni diapositiva:

Esempio

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

Prova direttamente