Bootstrap-Bedienelemente ohne JavaScript: Carousel

Bootstrap-Carousel aus reinem HTMl und CSS

Die Beispiele sind für Bootstrap 5.3 optimiert. Damit ist auch ein Dark-Mode möglich.

Beta-Version! Änderungen sind noch jederzeit möglich!
Die technischen Beschreibungen folgen noch.

Carousel

Im Bootstrap-Stil

Alle Bilder werden zufällig von Lorem Picsum geladen.

Erweiterte Möglichkeiten

Alle Bilder werden zufällig von Lorem Picsum geladen.

Vielfältige Gestaltungsmöglichkeiten
- Bootstrap Light- / Dark-Mode + High-Contrast-Mode
- Bilder können kompletten Hintergrund einnehmen (cover und zentriert)
- Seite (Bilder) kann mit einem Filter überlagert werden (extra DIV)
- Verschiedene Seitennummerierungen (Position, Römisch, Numerisch)
- Horizontales oder vertikales Scrolling
- Scrollbars ausblenden
- …
Navigationsleiste:
- Leiste zur direkten Navigation kann auch außerhalb des Scrollbereichs angezeigt werden
- Navigationsleiste mit und ohne Hintergrund
- Elemente zur direkten Seitenanwahl können geändert werden (Numerisch, Römisch, Sonderzeichen)
- Noch keine automatische Animation
- …
Aufgebaut auf den CSS Eigenschaften scroll-snap usw., gestylt mit Bootstrap und zusätzlichem CSS.
Kann man allen Bootstrap-Klassen umgestylt werden.

Zusammenfassung

Mit ein wenig CSS lassen sich Carousele komplett ohne JavaScript erzeugen.
Damit sparen Sie sich, für diese Fälle, die zusätzliche Übertragung der Datei bootstrap.bundle.min.js ( 80.42 kB).

Das spart Energie, Übertragungsvolumen, Speicherplatz und Ihre Seite wird schneller geladen.

Mehr zum Thema

Weitere Elemente

Software

Weiterführende Informationen

Downloads

	Bootstrap-Bedienelemente ohne JavaScript
	Beispiele und CSS-Dateien. Für jedes Element ist eine einzelne CSS-Datei vorhanden. Card-Collapse Tabs Tooltips Carousel (Beta)		Download
	11.82 KB MIT		159

Titel-Bild von Thorsten Willert, basierend auf der Startseite von Bootstrap. Bootstrap-Icon aus simple-icons.