Carousels (classic & vertical)

Hier findest du unsere verschiedenen Bildkarussell-Elemente. Diese Komponenten ermöglichen die Darstellung mehrerer Bilder in einem interaktiven Slider-Format und können je nach Anforderung horizontal oder vertikal genutzt werden.

image_carousel_classic ist ein klassisches Bildkarussell, mit dem mehrere Bilder horizontal durchgeslidet werden können. Nutzer können dabei per Klick oder Swipe zwischen den einzelnen Bildern wechseln. Standardmäßig wird dieses Element im 4:3-Format dargestellt, kann jedoch flexibel auch in anderen Seitenverhältnissen eingesetzt werden, um sich an unterschiedliche Designanforderungen anzupassen. Bildunterschriften (Captions) können optional entfernt werden, sodass das Element auch vollständig ohne Bildtexte funktioniert.

Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.
Ich bin eine Bildunterschrift.

image_carousel_vertical ist ein vertikales Bildkarussell, das sich standardmäßig über die gesamte Breite der Webseite erstreckt und mehrere Bilder durch vertikales Scrollen oder Swipen nach oben und unten darstellt. Nutzer können dabei intuitiv zwischen den einzelnen Bildern entlang einer vertikalen Achse navigieren. Das Element ist fest für die Full-Width-Darstellung konzipiert und kann nicht in anderen Layoutbreiten genutzt werden. Bildunterschriften (Captions) werden von diesem Element nicht unterstützt.

Hinweis: Das Element eignet sich nicht für jedes Motiv, da in der mobilen Ansicht aufgrund des begrenzten Platzes Bildausschnitte anders wirken können und nicht immer der gewünschte Bildausschnitt vollständig sichtbar ist. Um die Darstellung gezielt zu steuern, können Bilder über zusätzliche CSS-Klassen in ihrer Ausrichtung angepasst werden. Dabei stehen die Klassen left-align, center-align und right-align zur Verfügung, um den Fokus des Bildausschnitts innerhalb des verfügbaren Bereichs zu verschieben. Dadurch lässt sich bestimmen, welcher Teil des Bildes im sichtbaren Bereich priorisiert dargestellt wird, insbesondere auf kleineren Bildschirmen.

Gefällt Ihnen, was Sie lesen?

Abonnieren Sie jetzt den imDialog Newsletter und bleiben Sie immer up to date!