Bootstrap 5 Bildspel

Karusell / Bildspel

En karusell är en bildspel som används för att cykla igenom element:

Hur man skapar en karusell

Följande exempel visar hur man skapar en grundläggande carousel med indikatorer och kontroller:

Exempel

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- 指标/点 -->
  <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>
  <!-- 幻灯片/轮播 -->
  <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>
  <!-- 左右控件/图标 -->
  <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 själv

Exempel förklaring

Beskrivning av varje klasss roll i föregående exempel:

Klass Beskrivning
.carousel Skapa rullband.
.carousel-indicators Lägg till indikatorer för rullbandet. Detta är små punkter på botten av varje bildspel.
Visar hur många bildspel som finns i rullbandet samt vilket bildspel användaren för närvarande tittar på.
.carousel-inner Lägg till bildspelet till rullbandet.
.carousel-item Definiera innehållet för varje bildspel.
.carousel-control-prev Lägg till en vänsterpil (föregående) till rullbandet, vilket tillåter användaren att gå tillbaka mellan bildspel.
.carousel-control-next Lägg till en högerpil (nästa) till rullbandet, vilket tillåter användaren att gå framåt mellan bildspel.
.carousel-control-prev-icon Används tillsammans med .carousel-control-prev för att skapa en "föregående"-knapp.
.carousel-control-next-icon Används tillsammans med .carousel-control-next för att skapa en "nästa"-knapp.
.slide Lägg till CSS-overgångar och animationseffekter när man skjuter från ett projekt till nästa.
Om du inte vill ha detta effekt, ta bort denna typ.

Lägg till en titel för bildspelet

Lägg till en titel för varje <div class="carousel-item"> inom <div class="carousel-caption"> Lägg till element i, skapa en titel för varje bildspel:

Exempel

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

Prova själv