Carousel Karussell
Einführung
Die Carousel-Komponente ist eine leistungsstarke, nativ scrollende Diashow, die durch eine Reihe von Folien blättert. Speziell für den CMS-Seitenbau konzipiert und standardmäßig mit statischem Zero-JS-Rendering, setzt sie auf moderne CSS-Scroll-Snap-Primitive statt auf schwere JS-Transform-Logik.
Dadurch funktionieren Wischgesten, Trackpad-Scrollen und Tastenpfeil-Navigation bereits vor der Client-Hydration sofort. JavaScript wird erst dann elegant hinzugefügt, wenn Indikatoren, Vor-/Zurück-Buttons oder Autoplay-Trigger angeklickt werden.
Verwendung
Sie können Folien konfigurieren und anordnen, Anzeigelayouts festlegen und Autoplay-Eigenschaften steuern.
Einfache Diashow
Ein Standard-Bildbanner mit Vollbild-Folien, überlagerten Beschriftungen und Navigationslinks. Ideal für Hero-Header oder Hauptseiten-Showcases.
{
"blockType": "carousel",
"slides": [
{
"image": "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80",
"caption": "Real-Time Analytics — Pulse delivers live data and dashboards with sub-second streaming latency.",
"href": "/features/analytics"
},
{
"image": "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=800&q=80",
"caption": "AI-Powered Detection — Smart anomaly detection notifies your team before production breaks.",
"href": "/features/ai-detection"
},
{
"image": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80",
"caption": "Unified Team Workspaces — Share annotated charts and build custom workspaces with ease.",
"href": "/features/workspaces"
}
]
}
Autoplay-Banner mit Hover-Steuerung
Konfigurieren Sie das Karussell für den automatischen Wechsel in einem festgelegten Tempo. Um die Oberfläche zugänglich und unaufdringlich zu halten, aktivieren Sie pauseOnHover, sodass Benutzer die Wiedergabe einfach durch Darüberfahren mit der Maus pausieren können.
{
"blockType": "carousel",
"loop": true,
"pauseOnHover": true,
"autoplayDelay": 3500,
"slides": [
{
"image": "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80",
"caption": "Developer Tools — Integrate your APIs in minutes with our native SDK wrappers.",
"href": "/developers"
},
{
"image": "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&q=80",
"caption": "Ironclad Security — SOC2-compliant data storage and end-to-end encryption by default.",
"href": "/security"
}
]
}
Multi-Folien-Layout
Zeigen Sie mehrere Folien gleichzeitig nebeneinander an. Hervorragend für Produktlisten, Team-Verzeichnisse und Portfolio-Galerien. Setzen Sie das Attribut slidesPerPage zusammen mit einem benutzerdefinierten spacing zwischen den Elementen.
{
"blockType": "carousel",
"slidesPerPage": 2,
"spacing": "16px",
"slides": [
{
"image": "https://images.unsplash.com/photo-1542744094-3a31f103e35f?w=400&q=80",
"caption": "Marketing Solutions",
"href": "/solutions/marketing"
},
{
"image": "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&q=80",
"caption": "Financial Growth",
"href": "/solutions/financial"
},
{
"image": "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=400&q=80",
"caption": "HR Management",
"href": "/solutions/hr"
},
{
"image": "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=400&q=80",
"caption": "Executive Advisory",
"href": "/solutions/consulting"
}
]
}
Vertikaler Galerie-Feed
Blättern Sie durch Ihre Folieninhalte vertikal statt horizontal. Hervorragend für mobile, inhaltsorientierte Karten, Medien-Reels oder seitliche Navigationsbereiche.
{
"blockType": "carousel",
"orientation": "vertical",
"slides": [
{
"image": "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=800&q=80",
"caption": "Curated Feed — Category Spotlight"
},
{
"image": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&q=80",
"caption": "Trending Creator Profile"
},
{
"image": "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=800&q=80",
"caption": "Featured Technical Portfolio"
}
]
}
Akzent-thematisch mit überlagerten Steuerelementen
Lassen Sie die Vor-/Zurück-Trigger und Punkte mithilfe der Eigenschaft inline direkt über den Bildern schweben (anstatt sie darunter anzuordnen), und färben Sie aktive visuelle Hinweise mit einem akzentuierten colorPalette-Token ein.
{
"blockType": "carousel",
"inline": true,
"colorPalette": "purple",
"slides": [
{
"image": "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=800&q=80",
"caption": "Overlay Design Layout"
},
{
"image": "https://images.unsplash.com/photo-1531403009284-440f080d1e12?w=800&q=80",
"caption": "High Fidelity Previews"
}
]
}
Eigenschaften
| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
slides | List | - | Eine geordnete Sammlung einzelner Folien (siehe Schema unten). |
slidesPerPage | Number | 1 | Anzahl der gleichzeitig im Viewport sichtbaren Folien. |
spacing | String | - | CSS-kompatibler Abstand zwischen sichtbaren Folien (z. B. "16px", "1rem"). |
loop | Boolean | false | Ob das Karussell nach Erreichen des Endes wieder zur ersten Folie zurückkehrt. |
autoplayDelay | Number | - | Autoplay-Timer in Millisekunden. Leer lassen oder weglassen, um Autoplay vollständig zu deaktivieren. |
pauseOnHover | Boolean | true | Pausiert das Autoplay, wenn der Zeiger des Benutzers über den Folien schwebt. |
orientation | Select | horizontal | Scroll-Layoutrichtung. Optionen: horizontal, vertical. |
inline | Boolean | false | Legt Navigationssteuerungen und Punkte über die Slide-Medien, anstatt sie in einem Container darunter zu platzieren. |
colorPalette | Select | - | Visuelle Akzentfarbe für Buttons und Indikatoren. Optionen: blue, green, red, purple, orange, amber, cyan, slate. |
Folien-Element-Schema
Jeder Eintrag im Parameter slides akzeptiert die folgenden Eigenschaften:
| Eigenschaft | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
image | Image | Ja | Pfad oder URL zum Hintergrundbild der Folie. |
caption | String | Nein | Überlagernder Beschreibungstext, der dynamisch im unteren Bereich der Folie gerendert wird. |
href | String | Nein | Navigations-URL oder lokalisierte Seitenroute, die beim Klick auf die gesamte Folie ausgelöst wird. |
Architekturhinweise
- Keine Layout-Verschiebungen während SSR: Um Layoutsprünge beim Server-Rendering zu eliminieren, werden die Snap-Point-Marker und Viewport-Breiten mithilfe einer vorhersagbaren Strukturformel vorberechnet, die mit den Einstellungen
slideCountundslidesPerPageübereinstimmt. - Robuste Ereignisdelegation: Alle Klick-Handler für Indikatoren, Punkt-Pagination und Pause-Trigger werden über einen einzigen, vom Root-Container delegierten einheitlichen Event-Listener verwaltet. Dies vermeidet das wiederholte Zuweisen von Event-Listenern an statische Komponenten innerhalb der hydrierten Seitenvorlage.
- CSS Scroll Snap: Reines CSS-Scroll-Snap übernimmt die Layout-Ausrichtung nativ. Auf mobilen Touchscreens und modernen Trackpads bleiben Wisch-zum-Scrollen-Übergänge flüssig und funktionieren korrekt, selbst wenn JavaScript deaktiviert oder verzögert ist.