Aus dem Kurs: Bootstrap 5 Grundkurs

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Karussell steuern

Karussell steuern

Bootstrap bietet mehrere, interaktive Komponenten, die JavaScript brauchen, diese können Sie steuern im HTML-Code oder auch per JavaScript. Wie das funktioniert, sehen wir uns am Beispiel eines Karussells an. Das ist das Karussell, d. h., wir haben Bilder, die dann immer durchgewechselt werden. Im HTML-Code gibt es ein umfassendes Element mit dem Klassen carousel und slide. Da drin steht ein Element mit der Klasse carousel-inner und dieses beinhaltet dann mehrere Elemente mit den Klassen carousel-item, wobei das Bild, was direkt zu sehen sein soll, noch zusätzlich die Klasse active erhält. Soweit ist alles ganz klassisches Bootstrap, nun gibt es eine Besonderheit und das ist diese Angabe hier: data-bs-ride. Über data können Sie eigene Attribute definieren in HTML5, diese sind bei Bootstrap mit dem Präfix "bs" versehen und über data-bs-ride mit dem Wert "carousel" sorgen sie dafür, dass das Karussell automatisch startet und durchläuft. D. h., Sie brauchen keine Zeile…

Inhalt