Image Carousel Karten

Die image_carousel Komponente zeigt Bilder in einer Karussell-Galerie an. Es handelt sich um eine für Bildinhalte optimierte Variante des Kartenkarussells.

WCAG AA
JavaScript

Funktionen

  • Bildunterschriften: Optionaler Beschreibungstext für jedes Bild.

  • Autoplay: Optional automatic slide advancement.

  • Navigationselemente*: Punkte, Pfeile und optionale Seitenzahl.

INFO:

Diese Dokumentation bezieht sich nur auf das Bilder-Karussell. Für weitere Informationen zu dem Karussell allgemein, siehe Card Carousel.

HTML
JS

Verwendung

Die Komponente wird über das image_carousel Tag eingebunden.

{% load insight_tags %} {% image_carousel config=carousel_config %} <!-- or --> {% image_carousel images=image_carousel_items show_dots=True show_index=True items_per_slide=1 %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
carousel_items

Liste der Bildkonfigurationen.

 [] False
autoplay bool

Seiten automatisch weiterblättern.

 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 Bilder.

 1 False
ImageCarouselConfig( carousel_items=[ ImageCarouselItemConfig(url="/img/photo1.jpg", alt="Photo 1"), ImageCarouselItemConfig(url="/img/photo2.jpg", alt="Photo 2"), ], autoplay=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Enthält Barrierefreiheitsfunktionen von Card Carousel.

  • Das Feld alt ist ein Pflichtfeld, um sicherzustellen, dass Entwickler aussagekräftige Beschreibungen angeben.

  • Beschreibungs-Overlays werden als lesbarer Text dargestellt.

Verwandte Themen