Bootstrap 4 Carousel Tutorial

Bootstrap 4 Carousel

Das Karussell ist eine Diashow-Komponente zum animierten Vorführen einer Reihe von Elementen, wie in einem Karussell.

Beispiel

Wie wird ein Carousel erstellt

Das folgende Beispiel zeigt, wie man ein Basiskarussell mit Indikatoren und Steuerelementen erstellt:

Beispiel:
<div id="demo" class="carousel slide" data-ride="carousel">
                
        <!-- Indicators -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- The slideshow -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="la.jpg" alt="Los Angeles">
            </div>
            <div class="carousel-item">
                <img src="chicago.jpg" alt="Chicago">
            </div>
            <div class="carousel-item">
                <img src="ny.jpg" alt="New York">
            </div>
        </div>

        <!-- Steuerelemente -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span></a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span></a>

    </div>
Erklärung:
Class Description
.carousel Erzeugt ein Karussell
.carousel-indicators Fügt Indikatoren für das Karussell hinzu. Dies sind die kleinen Striche am unteren Rand jeder Folie (die angibt, wie viele Folien sich im Karussell befinden und welche Folie der Benutzer gerade anzeigt).
.carousel-inner Fügt dem Carouel Folien hinzu
.carousel-item Gibt den Inhalt jeder Folie an
.carousel-control-prev Fügt dem Karussell eine linke (vorherige) Schaltfläche hinzu, über die der Benutzer zwischen den Folien wechseln kann
.carousel-control-next Fügt dem Karussell eine rechte (nächste) Schaltfläche hinzu, mit der der Benutzer zwischen den Folien vorwärts gehen kann
.carousel-control-prev-icon Wird zusammen mit .carousel-control-prev verwendet, um eine "vorherige" Schaltfläche zu erstellen
.carousel-control-next-icon Wird zusammen mit .carousel-control-next verwendet, um eine Schaltfläche "next" zu erstellen
.slide Fügt beim Verschieben von einem Element zum nächsten einen CSS-Übergangs- und Animationseffekt hinzu. Entfernen Sie diese Klasse, wenn Sie diesen Effekt nicht möchten
Automatisches sliden verhindern oder Intervall einstellen

Mit data-interval="false" kann das automastiche Sliden verhindert werden oder aber durch einfügen einer Zahl in ms die Zeit eingestellt werden

<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
   ...
<div>
<!-- Intervall einstellen -->
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="3000">
   ...
<div>

Bildunterschriften zu Slides hinzufügen

Beispiel:
<div class="carousel-item">
    <img src="images/slider1.jpg" alt="Bild 1">
    <div class="carousel-caption">
    <h3>Bild 1</h3>
    <p>Dies ist eine Bildunterschrift</p>
</div>