3D Carousel Karten

Die three_d_carousel Komponente zeigt Elemente in einer kreisförmigen 3D-Anordnung an. Sie bietet eine einzigartige visuelle Darstellung zur Präsentation von Inhalten.

WCAG AA
WCAG AAA
JavaScript

Funktionen

  • 3D-Anordnung: Objekte, welche auf einer Kreisbahn angeordnet sind.

  • Drehgeschwindigkeit: Konfigurierbare Geschwindigkeit der dreh-Animation.

  • Kameraneigung: Einstellbarer Blickwinkel.

  • Kamera blickend: Die Objekte sind immer zum Betrachter hin ausgerichtet.

HTML
JS

Verwendung

Die Komponente wird über das 3d_carousel Tag eingebunden.

{% load insight_tags %} {% three_d_carousel config=carousel_config %} <!-- or --> {% three_d_carousel tag_id="threeD_carousel" velocity=300 face_camera=True carousel_items=items %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
tag_id str

Eindeutige ID für das Karussell.

 None True
carousel_items

Liste der anzuzeigenden Elemente.

 [] False
velocity int

Drehgeschwindigkeit.

 1000 False
tilt int

Neigungswinkel der Kamera.

 0 False
face_camera bool

Wenn „True“, sind die Elemente immer zur Kamera ausgerichtet.

 False False
ThreeDCarouselConfig( tag_id="product-showcase", carousel_items=[...], velocity=1000, tilt=15, face_camera=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

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

  • Die Navigations-Buttons enthalten neben Symbolen auch beschreibende Texte („Zurück“, „Weiter“).

  • Tastaturnavigation: Mit den Pfeiltasten nach links und rechts kann zwischen den Elementen gewechselt werden.

  • Die Animationsdistanz passt sich der Bildschirmgröße an, um eine bessere Sichtbarkeit zu gewährleisten.

WCAG AAA (Erweitert)

  • Beachtet prefers-reduced-motion: Animationen erfolgen ohne sichtbare Übergangseffekte, wenn reduzierte Bewegung bevorzugt wird.

Verwandte Themen