Bootstrap 5-Slider

Karussell / Slideshow

Ein Karussell (Slideshow) ist eine Anzeige, die zur wiederholten Ansicht von Elementen dient:

Wie man ein Karussell erstellt

Dieses Beispiel zeigt, wie man eine grundlegende Slideshow mit Indikatoren und Steuerelementen erstellt:

Beispiel

<!-- 轮播 -->
<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>

Versuchen Sie es selbst

Beispiel-Erläuterung

Beschreibung der Wirkung jeder Klasse im obigen Beispiel:

Klasse Beschreibung
.carousel Erstellen Sie eine Diashow.
.carousel-indicators Fügen Sie Indikatoren zur Diashow hinzu. Sie sind die kleinen Punkte am Fuß jeder Folie.
Stellt dar, wie viele Folien in der Diashow vorhanden sind und welche Folie der Benutzer zurzeit ansieht.
.carousel-inner Fügen Sie die Folie zur Diashow hinzu.
.carousel-item Definieren Sie den Inhalt jeder Folie.
.carousel-control-prev Fügen Sie eine nach links (vorherige) Taste zur Diashow hinzu, die es dem Benutzer ermöglicht, zwischen den Folien zurückzugehen.
.carousel-control-next Fügen Sie eine nach rechts (nächste) Taste zur Diashow hinzu, die es dem Benutzer ermöglicht, zwischen den Folien zu navigieren.
.carousel-control-prev-icon Verwenden Sie sie zusammen mit .carousel-control-prev, um einen "Vorherige"-Knopf zu erstellen.
.carousel-control-next-icon Verwenden Sie sie zusammen mit .carousel-control-next, um einen "Nächste"-Knopf zu erstellen.
.slide Fügen Sie CSS-Übergangs- und Animationseffekte hinzu, wenn von einem Projekt zum nächsten Projekt gewechselt wird.
Wenn Sie diesen Effekt nicht haben möchten, löschen Sie diese Art.

Fügen Sie dem Diashow-Titel hinzu

Bitte fügen Sie in jedem <div class="carousel-item"> Innerhalb <div class="carousel-caption"> Fügen Sie Elemente hinzu, um Titel für jede Folie zu erstellen:

Beispiel

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

Versuchen Sie es selbst