Card Carousel Karten

Die carousel Komponente zeigt eine Reihe von Elementen in einem Karussell an, durch welche man wechseln kann. Sie kann mehrere Elemente pro Folie (Seite) anzeigen und unterstützt die automatische Wiedergabe.

WCAG AA
JavaScript

Funktionen

  • Autoplay: Optional automatic slide advancement.

  • Navigationspunkte: Punkte zur Seitenanzahlanzeige.

  • Seitenindex: Optionaler Zähler für aktuelle/Gesamtanzahl.

  • Elemente pro Seite: Konfigurierbare Anzahl der angezeigten Elemente.

HTML
JS

Verwendung

Die Komponente wird über das card_carousel Tag eingebunden.

{% load insight_tags %} {% carousel config=carousel_config %} <!-- or --> {% carousel carousel_items=carousel_items show_index=True items_per_slide=2 %}

Parameter

Laden…

config (CardCarouselConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
carousel_items

Liste der anzuzeigenden Elemente.

 [] False
autoplay bool

Die Seiten werden alle 5 Sekunden automatisch weitergeschaltet.

 False False
show_dots bool

Paginierungspunkte anzeigen.

 True False
show_index bool

Aktuelle/Gesamt-Seitennummer anzeigen.

 False False
items_per_slide int

Anzahl der pro Seite angezeigten Elemente.

 1 False
CardCarouselConfig( carousel_items=[ CarouselItemConfig(title="Item 1", content="Description 1"), CarouselItemConfig(title="Item 2", content="Description 2"), ], autoplay=True, show_dots=True, items_per_slide=3, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Der Container hat die Eigenschaft role='region' mit aria-roledescription='carousel' und aria-label.

  • Navigations-Buttons verwenden sr-only-Text, um beschreibende Bezeichnungen für Screenreader bereitzustellen.

  • Paginierungspunkte enthalten einen sr-only-Text, der angibt, zu welcher Seite sie führen.

  • Für die mobile Navigation werden Touch-Gesten (Wischen) unterstützt.

WCAG AAA (Erweitert)

  • Vollständige Tastaturnavigation: Mit den Pfeiltasten nach links/rechts navigieren, mit „Home“/„End“ zur ersten/letzten Folie springen.

  • Die automatische Wiedergabe wird beim Bewegen des Mauszeigers und beim Fokuswechsel unterbrochen, sodass die Nutzer mehr Zeit zum Lesen der Inhalte haben.

Verwandte Themen