Optionales Modul

Inhalte im eigenen Tempo.

Semantische Folien, klare Navigation und keine automatische Rotation. Das Karussell übernimmt Farben, Dichte und Schriftgröße deiner Seite.

Projektvorschau

01 · Planen

Eine klare Richtung.

Ordne Ziele, Inhalte und Verantwortlichkeiten, bevor das erste Layout entsteht.

Grundlagen ansehen

02 · Gestalten

Dein System. Dein Ausdruck.

Verwende dieselben Tokens für eine kompakte Geschäftsoberfläche oder eine großzügige Präsentation.

Gestaltung erkunden

03 · Veröffentlichen

Bereit für echte Inhalte.

HTML bleibt lesbar. JavaScript ergänzt gezielt die Navigation zwischen den Folien.

Einbindung ansehen

HTML + JavaScript · vollständige minimale Einbindung

<!doctype html>
<html lang="de">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mein Karussell</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/carousel.css">
<div class="r-carousel" data-r-carousel aria-label="Projektideen">
  <article data-r-slide><h2>Eine klare Richtung</h2><p>Deine erste Idee.</p></article>
  <article data-r-slide><h2>Ein neuer Blick</h2><p>Deine zweite Idee.</p></article>
  <article data-r-slide><h2>Bereit zum Start</h2><p>Deine dritte Idee.</p></article>
</div>
<script type="module">
  import {initCarousels} from 'https://ui.rittek.de/assets/modules/carousel.js';
  const group = initCarousels();
  // Bei Entfernung der Ansicht: group.destroy();
</script>
</html>

Zyklisch und auf Englisch

Build with confidence

This carousel loops from the last slide back to the first.

Keep control

Nothing advances until you choose another slide.

HTML · zyklische Variante

<div class="r-carousel" data-r-carousel data-r-loop="true"
     data-r-locale="en" lang="en" aria-label="Release highlights">
  <article data-r-slide><h3>Build with confidence</h3></article>
  <article data-r-slide><h3>Keep control</h3></article>
</div>

Die Vorschauen arbeiten ausschließlich lokal. Neu initialisieren beginnt wieder bei Folie 1; über die API lässt sich der bisherige Index als initial übergeben.

API und Lebenszyklus

JavaScript

import {createCarousel, initCarousels} from 'https://ui.rittek.de/assets/modules/carousel.js';

const root = document.querySelector('[data-r-carousel]');
const carousel = createCarousel(root, {initial: 0, loop: false, locale: 'de'});
carousel.next();
carousel.previous();
carousel.goTo(2); // nullbasierter Index; liefert true bei Wechsel
console.log(carousel.getState()); // {index, count, loop, destroyed}
root.addEventListener('rittek:carouselchange', event => {
  console.log(event.detail); // {index, previousIndex, count}
});
carousel.destroy(); // Ursprüngliche Attribute und Inhalte wiederherstellen
const group = initCarousels(document); // oder Teilbaum als scope
group.destroy();

Erneutes createCarousel auf demselben Element räumt die bisherige Instanz auf. Ohne JavaScript bleiben alle Folien im normalen Dokumentfluss sichtbar. Für den Start genügen rittek.css, carousel.css und das Modul; rittek.js wird dafür nicht benötigt.

Bedienung und Fokus

Container oder Navigation fokussieren: Pfeil links/rechts wechselt Folien, Home/End springt an Anfang oder Ende. In Schreibrichtung rechts nach links werden die Pfeile entsprechend umgekehrt. Eingebettete Links, Formulare und andere Steuerelemente behalten ihre eigene Tastaturbedienung. Indikatoren bleiben normale Schaltflächen, keine Tabs.

Beim programmgesteuerten Wechsel wird der Fokus aus einer ausblendenden Folie auf den Container verschoben. Ohne Loop stoppen Vor/Zurück an den Grenzen; deaktivierte Rand-Schaltflächen geben ihren Fokus an den aktuellen Indikator weiter.

Bewusste Grenzen

Eine sichtbare Folie pro Karussell. Keine automatische Rotation, Wischgeste, Drag-Navigation oder virtuelle Folien. Direkte Kinder mit data-r-slide bilden die feste Folienliste; nach strukturellen Änderungen destroy und neu initialisieren. Beginne mit zugänglichen, nicht versteckten Folien. Verwende eindeutige IDs und eine aussagekräftige Beschriftung. Viele Folien erzeugen viele Indikatoren; für umfangreiche Sammlungen eignet sich eine Liste oder Paginierung besser.

Folien wechseln ohne horizontale Bewegung; die kurze Einblendung respektiert reduzierte Bewegung. Unterschiedliche Inhaltshöhen können die Seitenhöhe ändern. Das Modul lädt keine externen Medien und versendet keine Daten.