Der Image Slider ermöglicht es, mehrere Bilder platzsparend und animiert darzustellen. Er eignet sich besonders, um Bildserien, Produktfotos oder Stimmungsbilder dynamisch zu präsentieren.
Nach dem Einfügen des Moduls können Sie auf der linken Seite grundlegende Einstellungen wie Animation, Navigationselemente oder Darstellung vornehmen. Auf der rechten Seite fügen Sie Ihre Bilder oder Videos hinzu. Diese können aus dem Mediapool ausgewählt oder neu hochgeladen werden.
Jedes hinzugefügte Element lässt sich individuell bearbeiten. Sie können Bilder austauschen, zuschneiden oder entfernen. So kann der Slider flexibel an den gewünschten Einsatzzweck angepasst werden.
Der Image Slider
Allgemeines / Ausgabe Template
Allgemeines / optische Einstellungen
- Allgemeine Einstellungen des Image Sliders
- Bildanpassung
- Seitenverhältnis
- Pfeilnavigation
- Thumbnails
- Thumbnail Rahmen und Radius
- Thumbnail Zentriert
- Autoplay / Übergangsdauer
- Animationsart / Anzeigedauer
- Textausgabe / Farbe und Hintergrundfarbe der Texte
- Vollbildansicht
- Mausradverhalten
- Einstellungen nur für die Tiles-Templates
- Kachel Breite und Höhe
- Kachel Rahmenbreite und Rahmenfarbe
- Kachel Abstand / Abrundung
- Lightbox Design
Inhalt (Bilder/Videos/Tag-Auswahl) des Sliders

Beispiel eines Image Sliders

Ausgabe Template
Im Bereich Ausgabe Template wählen Sie aus, wie Ihre Bilder im Slider dargestellt werden sollen. Das Template bestimmt die Optik und die Art der Animation. Je nach Auswahl wirkt der Slider klassisch, als Karussell oder als animiertes Kachelraster.
Alle Templates können mit denselben Bildern befüllt werden; sie unterscheiden sich nur in der Darstellung.
Alle Templates können mit denselben Bildern befüllt werden; sie unterscheiden sich nur in der Darstellung.
Slider

Der klassische Bildslider. Die Bilder wechseln nacheinander, meist horizontal animiert. Beispiel: Ein großer Header-Slider auf der Startseite mit stimmungsvollen Bildern, die automatisch durchlaufen.
Slider mit Bildraster

Zeigt ein großes Hauptbild und daneben eine kleine Vorschau der nächsten Slides. Beispiel: Ein Slider für Immobilien oder Fahrzeuge, bei dem mehrere Blickwinkel sichtbar sein sollen.
Karussell

Mehrere Bilder sind gleichzeitig sichtbar. Die Bilder bewegen sich seitlich wie in einem Karussell. Beispiel: Logos von Partnerunternehmen oder Produktbilder, die nebeneinander durchlaufen.
Tiles - Spalten

Die Bilder werden in vertikalen Spalten aufgeteilt, die sich beim Wechsel animiert verschieben. Beispiel: Ein Bild zerfällt beim Übergang in mehrere Spalten, die nacheinander ein neues Bild zeigen.
Tiles - Reihen

Ähnlich wie Spalten, jedoch in horizontalen Reihen. Beispiel: Das Bild wird in horizontale Streifen geteilt, die sich bei jedem Wechsel abwechselnd bewegen.
Tiles - Verschachtelt

Die Bilder werden in unregelmäßige oder verschachtelte Bereiche geteilt, die sich unterschiedlich animieren. Beispiel: Ein Bild löst sich in verschiedenen Rechtecken auf, die in einer zufälligen Reihenfolge verschwinden.
Tiles - Raster

Das Bild wird in ein gleichmäßiges Kachelraster geteilt, bei dem alle Teile gleichzeitig oder versetzt animiert werden. Beispiel: Ein 3x3 oder 4x4 Raster löst das Bild wie ein Puzzle auf und zeigt danach das neue Bild.
Allgemeine Einstellungen des Image Sliders
In diesem Bereich bestimmen Sie, wie der Slider dargestellt wird. Hier legen Sie die grundlegenden Einstellungen wie Format, Navigation und Animation fest.

Bildanpassung

Hier legen Sie fest, wie die eingefügten Bilder innerhalb des Sliders dargestellt werden. Je nach Auswahl werden Bilder entweder vollständig angezeigt oder so zugeschnitten, dass der Bildausschnitt optimal in den verfügbaren Bereich passt.
- Original
Die Bilder werden in Originalgröße (Pixel) angezeigt - Beinhaltend
Das Bild wird auf die Größe des Image Sliders gezogen, aber nicht beschnitten - Füllend
Das Bild wird auf die Größe des Image Sliders gezogen und ggf an zwei Seiten beschnitten
Seitenverhältnis

Hier legen Sie fest, in welchem Format der Slider dargestellt wird. Sie können feste Formate wie 21:9 oder 16:9 wählen oder mit „Abmaße 1. Bild“ automatisch das Verhältnis des ersten Bildes übernehmen. Alle weiteren Slides passen sich diesem Format an.
Pfeilnavigation
Diese Option aktiviert die Vor- und Zurückpfeile am Slider. Besucher können damit manuell durch die Slides blättern.
Thumbnails
Hier steuern Sie, ob kleine Vorschaubilder angezeigt werden und wo sie platziert sind. Die Thumbnails dienen als zusätzliche Navigationsmöglichkeit und sind besonders hilfreich bei umfangreichen Bildgalerien.
Thumbnail Rahmen und Radius
Damit bestimmen Sie, ob Vorschaubilder einen Rahmen erhalten und wie stark dieser ausfällt. Zusätzlich können Sie festlegen, wie stark die Ecken abgerundet werden. Alle Werte werden in Pixeln angegeben.
Thumbnail Zentriert
Hier legen Sie fest, ob die Thumbnails optisch zentriert ausgegeben werden. Diese Einstellung beeinflusst die Anordnung innerhalb der Navigationsleiste.

Autoplay / Übergangsdauer
Autoplay steuert, ob der Slider automatisch zum nächsten Bild wechselt, ohne dass der Besucher aktiv wird. Dies kann besonders bei Startseiten oder Präsentationen sinnvoll sein.
Die Übergangsdauer bestimmt, wie schnell der Wechsel zwischen zwei Slides abläuft. Der Wert wird in Millisekunden angegeben und beeinflusst den visuellen Gesamteindruck des Sliders.
Die Übergangsdauer bestimmt, wie schnell der Wechsel zwischen zwei Slides abläuft. Der Wert wird in Millisekunden angegeben und beeinflusst den visuellen Gesamteindruck des Sliders.
Animationsart / Anzeigedauer
Hier legen Sie fest, wie die Bilder wechseln und wie lange sie sichtbar bleiben. Die Animationsart bestimmt den Übergang, zum Beispiel Slide oder Fade.
Die Anzeigedauer legt fest, wie lange ein Bild eingeblendet wird, bevor automatisch zum nächsten gewechselt wird.
Die Anzeigedauer legt fest, wie lange ein Bild eingeblendet wird, bevor automatisch zum nächsten gewechselt wird.
Textausgabe / Farbe und Hintergrundfarbe der Texte
Hier steuern Sie, ob Bildtitel oder Beschreibungen im Slider angezeigt werden. Sobald die Textausgabe aktiviert ist, können Sie die Textfarbe und die Hintergrundfarbe festlegen. Dadurch lassen sich Überschrift und Beschreibung gut lesbar darstellen und bei Bedarf mit einem farbigen Hintergrund hervorheben.
Vollbildansicht
Diese Option aktiviert ein Icon, mit dem Besucher den Slider in einer Vollbildansicht öffnen können. Für detailreiche oder besonders hochwertige Bilder ist das sehr empfehlenswert.
Mausradverhalten
Hier legen Sie fest, wie der Slider auf Scrollbewegungen reagiert. Je nach Einstellung kann das Mausrad zum Zoomen der Bilder oder zum Blättern zwischen den Slides verwendet werden. Alternativ bleibt der Slider unbeeinflusst und verhält sich neutral beim Scrollen.

Einstellungen nur für die Tiles-Templates
Diese Optionen stehen ausschließlich zur Verfügung, wenn das Ausgabe Template
Tiles - Spalten
Tiles - Reihen
Tiles - Verschachtelt
Tiles - Raster
gewählt wurde. In dieser Ansicht werden die Bilder nicht als Slider angezeigt, sondern als gleichmäßig angeordnete Kacheln. Die folgenden Einstellungen bestimmen Größe, Abstände und Gestaltung dieser Kacheln.
Tiles - Spalten
Tiles - Reihen
Tiles - Verschachtelt
Tiles - Raster
gewählt wurde. In dieser Ansicht werden die Bilder nicht als Slider angezeigt, sondern als gleichmäßig angeordnete Kacheln. Die folgenden Einstellungen bestimmen Größe, Abstände und Gestaltung dieser Kacheln.
Kachel Breite und Höhe
Hier legen Sie fest, wie groß die einzelnen Kacheln dargestellt werden. Die Werte werden in Pixeln angegeben.
Kachel Rahmenbreite und Rahmenfarbe
Damit bestimmen Sie, ob jede Kachel einen sichtbaren Rahmen erhält und in welcher Farbe dieser dargestellt wird.
Kachel Abstand / Abrundung
Hier legen Sie fest, wie viel Abstand zwischen den einzelnen Kacheln besteht und wie stark deren Ecken abgerundet werden. Beide Werte werden in Pixeln angegeben.
Lightbox Design
Hier wählen Sie aus, wie sich eine Kachel beim Anklicken verhält. Mit „keins“ bleibt die Kachel ohne Funktion. Mit „normal“ öffnet sich das Bild in einer klassischen Lightbox-Vorschau. Mit „kompakt“ erscheint die Bildvorschau in einer kleineren, reduzierten Darstellung.
Inhalt des Image Sliders
Der Inhaltsbereich steuert, welche Bilder oder Videos im Slider angezeigt werden und welche Informationen zu jedem Slide gespeichert sind. Sie können Inhalte entweder direkt aus dem Mediapool auswählen und Tags hinzufügen.

Mediapool-Auswahl
Über „Bild/Video hinzufügen“ wählen Sie die gewünschten Medien aus dem Mediapool aus oder laden neue Dateien hoch. Jeder Slide kann einzeln bearbeitet werden. Hierfür stehen Funktionen zum Austauschen des Bildes, Zuschneiden, Bearbeiten oder Löschen bereit. Auf diese Weise behalten Sie die Kontrolle über die Inhalte und können auch die SEO-relevanten Angaben präzise pflegen. Die Reihenfolge der Slides lässt sich bei der Mediapool-Auswahl jederzeit per Drag and Drop anpassen. Bei der Tag-Auswahl ist eine manuelle Sortierung nicht möglich.
Folgende Felder stehen pro Slide zur Verfügung:
Folgende Felder stehen pro Slide zur Verfügung:
Headline
Ein optionaler Titel für den Slide. Er kann im Slider angezeigt werden oder ausschließlich für interne Ordnung und SEO-Struktur dienen.
Bildbeschreibung
Ein kurzer Text zum Bild. Diese Beschreibung kann im Slider ausgegeben werden und hilft Suchmaschinen dabei, den Inhalt des Bildes besser einzuordnen.
Alt-Attribut
Das wichtigste SEO-Feld. Hier tragen Sie eine präzise Beschreibung des Bildinhalts ein. Das Alt-Attribut verbessert nicht nur Ihr Ranking, sondern ist auch essenziell für Barrierefreiheit und Screenreader.
Linkfeld
Wenn gewünscht, können Sie das Bild mit einer Zieladresse verlinken. Zusätzlich wählen Sie aus, ob der Link im selben Fenster oder in einem neuen Tab geöffnet werden soll.

TAG-Auswahl
Über die Tag-Auswahl können Sie den Slider automatisch mit Medien befüllen, die bestimmte Schlagwörter tragen. Diese Methode eignet sich besonders, wenn Sie viele Bilder verwalten oder Slider-Inhalte regelmäßig wechseln sollen, ohne jeden Slide einzeln anzulegen.
Wählen Sie im Feld Tagauswahl ein oder mehrere Schlagwörter aus. Alle Medien im Mediapool, die diese Tags besitzen, werden automatisch in den Slider geladen. Über die Option Auswahl per bestimmen Sie, ob ein Medium alle ausgewählten Tags erfüllen muss oder bereits eines davon ausreicht.
Bitte beachten Sie:
Bei der Tag-Auswahl ist keine manuelle Sortierung per Drag and Drop möglich, da die Reihenfolge automatisch anhand der Mediapool-Daten erzeugt wird.
Wählen Sie im Feld Tagauswahl ein oder mehrere Schlagwörter aus. Alle Medien im Mediapool, die diese Tags besitzen, werden automatisch in den Slider geladen. Über die Option Auswahl per bestimmen Sie, ob ein Medium alle ausgewählten Tags erfüllen muss oder bereits eines davon ausreicht.
Bitte beachten Sie:
Bei der Tag-Auswahl ist keine manuelle Sortierung per Drag and Drop möglich, da die Reihenfolge automatisch anhand der Mediapool-Daten erzeugt wird.
