Als Site-Builder möchte ich den Slider-Container mit erweitertem Funktionsumfang (Infinite-Carousel, sichtbarer Cursor beim Hovern, Bleed-Effekt) nutzen können, damit ich Karussell-Sektionen nach Figma-Spec umsetzen kann, ohne am Quellcode des Themes zu arbeiten.
| SDC | Verzeichnis | Art |
|---|---|---|
byte_theme:slider-container |
components/slider-container/ |
Refactor — neue Props + JS-Erweiterungen |
byte_theme:slider-item |
components/slider-item/ |
Referenz — unverändert, Canvas-Editor-Styles bereits vorhanden |
Neuer Bool-Prop infinite auf slider-container. Wenn aktiv, wird das
aktive Slide zentriert dargestellt, benachbarte Slides sind beidseitig sichtbar, Navigation
wraps nahtlos. Auf Mobile (< 768 px) ist Infinite automatisch deaktiviert — der Slider
verhält sich dort wie ein normaler Paged-Slider.
Technisch: JS trennt #infinite (Prop-Wert) von #infiniteActive
(effektiver Wert nach Breakpoint-Check). Alle Methoden arbeiten ausschließlich mit
#infiniteActive. Ein resize-Listener aktualisiert
#infiniteActive bei Viewport-Änderungen.
Nutzer sehen beim Hovern über den Slider eine Hand-Cursor-Geste, die andeutet, dass der
Slider per Drag/Maus bedienbar ist. Beim aktiven Drag wechselt der Cursor zu
grabbing.
Technisch: cursor-grab [&_*]:cursor-grab (Descendant-Selektor nötig, da
Kind-Elemente — z. B. Links in Cards — inherited cursor überschreiben). JS setzt
data-grabbing am Container-Element statt inline-style, damit der
CSS-Selektor [.slider-container[data-grabbing]_&]:cursor-grabbing greift.
Im Canvas-Editor ist der Grab-Cursor deaktiviert.
Neuer Enum-Prop bleed (none | sm). Bei sm
werden die äußeren Kanten der sichtbaren Slides um 15 px abgeschnitten — links und rechts —
was den Effekt „da ist noch mehr" erzeugt, ohne benachbarte Slides vollständig zu zeigen
(anders als peek). Wird von infinite und peek ignoriert,
wenn diese aktiv sind.
Technisch: #activeBleed()-Methode im JS; Korrektur des initialen
translateX um den Bleed-Betrag (sonst liegt das erste Slide bündig an der
Viewport-Kante — kein linker Clip).
| Prop | Typ | Default | Enum-Werte | Neu? |
|---|---|---|---|---|
infinite | boolean | false | — | Neu |
bleed | string | none | none, sm | Neu |
peek | string | none | none, sm, md, lg | vorhanden |
loop | boolean | true | — | vorhanden |
slides_per_view | number | 3 | 1, 2, 3, 4 | vorhanden |
autoplay | boolean | false | — | vorhanden |
autoplay_interval | number | 4000 | 2000–8000 | vorhanden |
infinite: true zentriert das aktive Slide mit beidseitig sichtbaren Nachbar-Slides; Navigation wraps endlos.data-infinite="false" im DOM, unabhängig vom gesetzten Prop.cursor: grab) — auch auf Kind-Elementen wie Links oder Bilder.cursor: grabbing.bleed: sm schneidet die äußeren Kanten der sichtbaren Slides links und rechts sichtbar ab (~15 px).slider-container und slider-item sind grün.data-canvas-editor) ist kein Grab-Cursor, keine Transform-Animation und kein Overflow-Clip aktiv.infinite: true auf einer Canvas-Seite einfügen (mindestens 5 Slides). Im Browser (Desktop ≥ 768 px): aktives Slide ist zentriert, linker und rechter Nachbar-Slide sind sichtbar. Pfeile navigieren endlos (kein Disable am letzten Slide).data-infinite-Attribut im DOM ist "false", Slider verhält sich wie Paged-Slider.testSliderContainerInfiniteDataAttribute grün: ddev exec ./vendor/bin/phpunit --group slider.grab). Über ein Kind-Element (Link, Bild) hovern: Cursor ist ebenfalls Hand.grabbing.slides_per_view: 2, bleed: sm auf einer Seite einfügen. Im Browser: erster und letzter sichtbare Slide sind links/rechts sichtbar abgeschnitten (~15 px). Erster Slide hat sichtbaren Clip an der linken Kante (kein bündiges Anlegen am Viewport).ddev exec ./vendor/bin/phpunit --group slider → 7 Tests, 0 Failures.