Slider
Karussell-Komponente auf Basis von Swiper.js. Unterstützt Keyboard-Navigation (Pfeiltasten), Touch-Swipe auf Mobilgeräten und eine ARIA Live-Region, die Screenreadern den aktuellen Slide mitteilt. Konfigurierbar: Anzahl der sichtbaren Slides, Gap, Loop-Modus und Autoplay.
Einfacher Slider (1 Slide sichtbar)
Jeder Slide nimmt die volle Breite ein. Typisch für Hero-Karussells, Testimonials oder große Bildpraesentation.
Kundenstimmen-Karussell
<Slider>
<SliderSlide>
<div class="bg-brand-surface-alt rounded-xl p-12 text-center">
<p class="text-lg italic">"Dank der Beratung von Stadtwerke Musterstadt spare ich jährlich über 300 Euro."</p>
<p class="mt-4 font-semibold">– Sabine K., Musterstadt</p>
</div>
</SliderSlide>
<SliderSlide>
<!-- weiterer Slide -->
</SliderSlide>
</Slider>Mehrere Slides sichtbar
Mit slidesPerView und gap können mehrere Kacheln gleichzeitig angezeigt werden – ideal für Produkt- oder Tarifuebersichten. Auf kleinen Bildschirmen reduziert Swiper die Anzahl automatisch.
Tarifkacheln (3 sichtbar)
<Slider slidesPerView={3} gap={24}>
<SliderSlide>
<div class="bg-brand-surface-alt rounded-lg p-8 text-center border border-brand-border">
<p class="font-semibold">Oekostrom Basis</p>
<p class="text-brand-muted text-sm mt-1">ab 29,90 €/Monat</p>
</div>
</SliderSlide>
<!-- weitere Slides -->
</Slider>Loop + Autoplay
Der Loop-Modus verbindet den letzten Slide nahtlos mit dem ersten. Autoplay laesst den Slider selbststaendig durchlaufen – pausiert automatisch, wenn der Nutzer interagiert oder die Seite den Fokus verliert (paused on focus, reduced motion berücksichtigt).
Autoplay-Banner
<Slider loop autoplay slidesPerView={2} gap={16}>
<SliderSlide>
<div class="bg-brand-primary/10 rounded-xl p-10 text-center">
Neukundenbonus: 50 € Gutschrift
</div>
</SliderSlide>
<!-- weitere Slides -->
</Slider>Redakteur-Hinweise
Empfehlungen für effektive Slider-Inhalte.
| Element | Empfehlung |
|---|---|
| Slide-Anzahl | 3–6 Slides ideal. Bei mehr als 8 sehen Nutzer die hinteren nie. Weniger ist mehr. |
| Bilder | Gleiche Abmessungen für alle Slides. Min. 1200×675px (16:9). Einheitlicher Bildstil innerhalb eines Sliders. |
| Autoplay | Nur für Bilder ohne Text-Inhalt. 5–8 Sekunden Intervall. Nutzer müssen pausieren können (WCAG). |
| Text in Slides | Kurz halten: Headline + 1 Satz. Laengere Texte werden beim Sliden nicht gelesen. |
| Alternative | Slider nur nutzen, wenn mehrere gleichwertige Inhalte platzsparend gezeigt werden sollen. Sonst: Grid oder Liste. |
Installation
cp-components add slider