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.72 kB).

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

Mehr zum Thema

Weitere Elemente

Software

Weiterführende Informationen

Downloads

css 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 link_extern     185


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