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)
- Verschiedende Seitenummerierungen (Position, Römisch, Numerisch)
- Horizontales oder Vertikales Scrolling
- Scrollbars ausblenden
- ...
- Navigationsleiste:
- Leiste zur direkten Navigation kann auch ausserhalb des Scrollbereichs angezeigt werden
- Navigationleiste 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-snapusw., gestylt mit Bootstrap und zusäzlichem 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.
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.
| Download | ||
04.02.2023 11.82 KB MIT  | 19 | ||
Titel-Bild von Thorsten Willert, basierend auf der Startseite von Bootstrap. Bootstrap-Icon aus simple-icons.