Das Erstellen eines Bootstrap 5-Karussells umfasst die folgenden Schritte:
1. Bootstrap einschließen:
- Verknüpfen Sie die Bootstrap-CSS-Datei (` `) im `
`-Abschnitt Ihres HTML-Dokuments.
- Fügen Sie Bootstrap-JavaScript hinzu (` `).
- Fügen Sie JQuery-JavaScript hinzu (` `).
2. Erstellen Sie einen Karussell-Container:
- Erstellen Sie ein Containerelement mit der Klasse „Carousel Slide“ und einer eindeutigen „ID“, zum Beispiel „
“.
- Fügen Sie `data-bs-ride="carousel"` zum Containerelement hinzu, was den automatischen Übergang von Folien ermöglicht.
3. Indikatoren erstellen (Paginierung):
- Erstellen Sie im Karussellbehälter ein „
`-Element mit der Klasse „carousel-indicators“, das „
`-Elemente, die Indikatoren darstellen.
- Jeder ` Das Element
sollte Datenattribute haben, die seinen Folienindex („data-bs-target="#myCarousel" data-bs-slide-to="0"`) und die Klasse „active“ für den ersten Indikator (Folie) angeben. .
4. Karussellelemente erstellen:
- Erstellen Sie im Karussell-Container ein „
“-Element mit der Klasse „carousel-inner“, das Ihre Folien enthält.
- Jede Folie sollte die Klasse „carousel-item“ haben. Das erste Karussellelement sollte die Klasse „aktiv“ haben.
- Fügen Sie jedem Karussellelement Bilder, Text oder andere Inhalte hinzu.
