Components

Shield-Carousel

Slot-basiertes Carousel fuer mehrschrittige Inhalte mit Peek-Verhalten auf Mobile, optionalem Peek auf Desktop und integrierten Navigations-Controls.

Default Story Playground

Basis-Integration

Direktes Slotting beliebiger Slide-Inhalte.

Slide 1

Einstieg

Die Komponente akzeptiert generischen Content ohne spezielle Slide-Subkomponenten.

Slide 2

Navigation

Pfeile und Delimiter sind bereits integriert und synchronisieren sich mit dem Scroll-Index.

Slide 3

Responsive Peek

Auf Mobile bleiben Nachbar-Slides sichtbar, auf Desktop ist Peek optional zuschaltbar.

Code

<shield-carousel aria-label="Beispiel Carousel">
  <shield-carousel-item><article>Slide 1</article></shield-carousel-item>
  <shield-carousel-item><article>Slide 2</article></shield-carousel-item>
  <shield-carousel-item><article>Slide 3</article></shield-carousel-item>
</shield-carousel>

Desktop Peek

Die Desktop-Variante kann die Mobile-artige Vorschau optional aktivieren.

Slide 1

Desktop Peek

Mit desktop-peek werden Nachbar-Slides auch auf grossen Breakpoints sichtbar.

Slide 2

Schrittweise Navigation

Die Pfeile bewegen sich immer exakt um einen Schritt weiter oder zurueck.

Slide 3

Imperative API

Die Methoden next, prev und goTo stehen fuer gesteuerte Flows bereit.

Code

<shield-carousel aria-label="Desktop Peek Beispiel" desktop-peek>
  <shield-carousel-item><article>Slide 1</article></shield-carousel-item>
  <shield-carousel-item><article>Slide 2</article></shield-carousel-item>
  <shield-carousel-item><article>Slide 3</article></shield-carousel-item>
</shield-carousel>

Imperative API

Methoden und Event fuer gesteuerte Navigation.

Nutze indexChange fuer Sync mit umgebender UI oder Wizard-Logik.

Code

const carousel = document.querySelector('shield-carousel');

await carousel?.next();
await carousel?.prev();
await carousel?.goTo(2);

carousel?.addEventListener('indexChange', (event) => {
  console.log(event.detail);
});

Guidelines

Slides als direkte Kinder slottieren und inhaltlich eigenstaendig halten.
Direkte Kinder sollten shield-carousel-item sein; der eigentliche Content liegt innerhalb dieses Wrappers.
Wichtige Aktionen innerhalb einer Slide klar priorisieren, damit Peek-Slides visuell sekundär bleiben.
desktop-peek nur aktivieren, wenn Nachbar-Schritte auf grossen Screens aktiv zur Orientierung beitragen.
Fuer synchrone Stepper-/Wizard-Logik das indexChange-Event verwenden.

Build-Hinweis

Bei dieser Komponente gab es einen Unterschied zwischen Stencil-Dev-Mode und Produktions-Build: Im Build-Pfad konnte ein InvalidCharacterError mit createElementNS('[object Object]') auftreten. Ursache war die Render-Struktur der Komponente, nicht das eigentliche Carousel-CSS.

Der Fehler wurde behoben, indem das Root-Markup ohne <Host> gerendert wird. Falls ein ähnlicher Fehler erneut auftaucht, zuerst den gebauten Stencil-Output prüfen und nicht nur das Laufzeit-CSS im Browser.