Bootstrap5 Karussell
Ein Karussell ist eine zyklische Diashow:
Wie man ein Karussell erstellt
Das folgende Beispiel erstellt einen einfachen Bildkarussell-Effekt:
Beispiel
<!--Karussell-->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!--Indikatoren-->
<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>
<!--Karussellbilder-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/static.jyshare.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="/static.jyshare.com/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="/static.jyshare.com/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
</div>
</div>
<!--Linke/rechte Steuerschaltflächen-->
<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>
Selbst ausprobieren »
Beschreibungen zu Karussellbildern hinzufügen
In jedem<div class="carousel-item">fügen Sie innerhalb<div class="carousel-caption"> hinzu,um den Beschreibungstext des Karussellbilds festzulegen:
Beispiel
<div class="carousel-item">
<img src="/static.jyshare.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Titel der Beschreibung der ersten Folie</h3>
<p>Der Beschreibungsinhalt des ersten Bildes wird hier angezeigt!!!</p>
</div>
</div>
Selbst ausprobieren »
Beschreibung der in den obigen Beispielen verwendeten Klassen
| Klasse | Beschreibung |
|---|---|
.carousel |
Ein Karussell erstellen |
.carousel-indicators |
Fügen Sie dem Karussell einen Indikator hinzu, das sind die kleinen Punkte unter den Karussellbildern. Während des Karussellprozesses zeigen sie an, welches Bild gerade angezeigt wird. |
.carousel-inner |
Fügen Sie die Bilder hinzu, die gewechselt werden sollen |
.carousel-item |
Den Inhalt jedes Bildes angeben |
.carousel-control-prev |
Fügen Sie einen linken Button hinzu; ein Klick darauf kehrt zur vorherigen Folie zurück. |
.carousel-control-next |
Fügen Sie einen rechten Button hinzu; ein Klick darauf wechselt zur nächsten Folie. |
.carousel-control-prev-icon |
Wird zusammen mit .carousel-control-prev verwendet, um den linken Button festzulegen |
.carousel-control-next-icon |
Wird zusammen mit .carousel-control-next verwendet, um den rechten Button festzulegen |
.slide |
Die Übergangs- und Animationseffekte beim Wechseln von Bildern. Wenn Sie diese Effekte nicht benötigen, können Sie diese Klasse entfernen. |