Karussells

Karussells, auch bekannt als Bildschieber, sind interaktive Elemente, die verwendet werden, um eine Reihe von Bildern oder Inhaltselementen rotierend anzuzeigen. Sie werden häufig verwendet, um Produkte, Portfolioelemente oder hervorgehobene Inhalte anzuzeigen.

Hauptmerkmale

Das Karussell-Element von Bootstrap ist ein leistungsstarkes Werkzeug zur Erstellung ansprechender Benutzererlebnisse. Es bietet automatisches Durchlaufen, Navigationssteuerungen und Anpassungsoptionen für Übergangseffekte, Timing und Indikatoren.

Verwendungs-Klassen

• carousel: Diese Klasse wird auf das Containerelement des Karussells angewendet;
• carousel-inner: Diese Klasse wird auf ein <div>-Element innerhalb des Containers angewendet. Es umschließt alle Karussellelemente (Folien) und definiert den inneren Inhalt des Karussells;
• carousel-item: Diese Klasse wird auf einzelne Folien innerhalb des Karussells angewendet. Jedes carousel-item repräsentiert eine Folie im Karussell;
• active: Diese Klasse markiert eine Folie als aktiv oder die aktuell angezeigte Folie. Sie stellt sicher, dass die entsprechende Folie sichtbar ist, wenn das Karussell gerendert wird;
• carousel-control-prev und carousel-control-next: Diese Klassen werden auf die vorherigen und nächsten Navigationsschaltflächen angewendet. Sie bieten Steuerungen, mit denen Benutzer manuell durch das Karussell navigieren können;
• data-bs-target und data-bs-slide: Diese Attribute werden mit den Navigationsschaltflächen verwendet, um das Zielkarussell und die Richtung der Folienübergänge anzugeben;
• carousel-indicators: Diese Klasse wird auf eine Liste von Indikatorelementen (normalerweise <li>-Elemente) angewendet, die jede Karussellfolie repräsentieren;
• data-bs-interval und data-bs-pause: Diese Attribute konfigurieren das Intervall (in Millisekunden) zwischen den Folienübergängen und geben an, ob das Karussell bei Hover oder Fokus pausieren soll.