Karussells, auch als Bild-Slider bekannt, sind interaktive Elemente, die verwendet werden, um eine Reihe von Bildern oder Inhaltselementen rotierend anzuzeigen. Sie werden häufig eingesetzt, um Produkte, Portfolioelemente oder hervorgehobene Inhalte zu präsentieren.

Hauptmerkmale

Die Carousel-Komponente von Bootstrap ist ein leistungsstarkes Werkzeug zur Gestaltung ansprechender Benutzererlebnisse. Sie bietet automatisches Durchlaufen, Navigationssteuerungen sowie Anpassungsmöglichkeiten für Übergangseffekte, Zeitsteuerung und Indikatoren.

Verwendete Klassen

• carousel: Diese Klasse wird auf das Containerelement des Karussells angewendet;
• carousel-inner: Diese Klasse wird auf ein <div>-Element innerhalb des Containers angewendet. Sie umschließt alle Karussell-Elemente (Slides) und definiert den inneren Inhalt des Karussells;
• carousel-item: Diese Klasse wird auf einzelne Slides innerhalb des Karussells angewendet. Jedes carousel-item stellt eine Folie im Karussell dar;
• active: Diese Klasse markiert eine Folie als aktiv bzw. aktuell angezeigt. Sie sorgt dafür, dass die entsprechende Folie beim Rendern des Karussells sichtbar ist;
• carousel-control-prev und carousel-control-next: Diese Klassen werden auf die Navigationsschaltflächen für vorherige und nächste Folie angewendet. Sie bieten Steuerungsmöglichkeiten für die manuelle Navigation durch das Karussell;
• 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 Indikator-Elementen (in der Regel <li>-Elemente) angewendet, die jede Karussell-Folie repräsentieren;
• data-bs-interval und data-bs-pause: Diese Attribute konfigurieren das Intervall (in Millisekunden) zwischen den Folienübergängen und legen fest, ob das Karussell beim Überfahren oder Fokussieren pausieren soll.