Beispiel: Bootstrap Slider

Erstelle eine HTML-Grundstruktur für Deine Seite und füge ein div-Element hinzu, um den Slider zu erstellen. Wie beispielsweise im ersten Code.
Füge dem myCarousel-Element den folgenden CSS-Code hinzu, um den Slider zu formatieren.

Dieser Code gibt dem Slider eine Breite von 100% und eine feste Höhe.

Füge den JavaScript-Code hinzu, um den Slider zu aktivieren.

Jetzt hast Du einen einfachen Slider in Bootstrap 5 erstellt.

Bootstrap 5 bietet viele Möglichkeiten zur Anpassung von Slidern. Du kannst die Geschwindigkeit und das Intervall der Slider-Animation anpassen, indem Du weitere Datenattribute hinzufügst. Du kannst auch verschiedene Slider-Typen wie Fullscreen-Slider und vertikale Slider erstellen, indem Du weitere CSS- und JavaScript-Regeln hinzufügst.

HTML:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="slide1.jpg" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="slide2.jpg" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="slide3.jpg" alt="Slide 3">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

CSS:
#myCarousel {
    width: 100%;
    height: 400px;
}

JAVASCRIPT:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Bootstrap Slider

Links