Slider-Extension für Karuselleffekte in TYPO3

  • Slider für Bilder und Videos
  • Slider für Inhaltselemente
  • Slider für Seiten

Slider-Erweiterung mit vielfältigen Einsatzmöglichkeiten

Verschiedene Einsatzwünsche unterschiedlicher Kunden haben den Funktionsumfang der von uns entwickelten TYPO3-Erweiterung für einen Slider stetig wachsen lassen. Die "a7carousel" wurde, aufbauend auf der TYPO3-Extension slickcarousel, als Bildergalerie mit Karusselleffekt ab TYPO3 7 entwickelt. Neben der Präsentation von Bildern bietet sie auch eine Funktion, um ganze Inhaltselemente im Karussell darzustellen.

Der Bild-Slider nutzt die Datenbanktabelle sys_file_references, dadurch kann pro Bild ein Titel-, Alt-Text und eine Bildunterschrift angegeben und ein Link gesetzt werden. Darüber hinaus bietet er die Möglichkeit, Bilder aus einer angelegten Dateisammlung (sys_file_collection) anzuzeigen. Dank vielfältiger Optionen sind viele verschiedene Darstellungsvarianten (auch in Kombination) möglich, beispielsweise mit Navigationspunkten, Play-/Pause-Schaltflächen, Vorschaubildern oder Klickvergrößern. Neben der hier im Beispiel gezeigten Einbindung im Inhaltsbereich neben dem Text ist die a7carousel natürlich auch für die Präsentation großformatiger Bilder, die den gesamten Bildschirm einnehmen, geeignet.

Der wohl typischste Einsatz des Inhaltselement-Sliders ist die Darstellung ausgewählter Text-mit-Bild-Inhaltselemente mit Karuselleffekt, wie auch unser Beispiel zeigt. In Kombination mit der von a7digital entwickelten TYPO3-Extension a7styles und wenigen Zusatzeinstellungen ist es dabei auch möglich, die im Rich Text Editor eingegebenen Texte, die z.B. auch Links enthalten können, auf den (z.B. ganzseitigen) Bildern anzuzeigen und davon mehrere durchlaufen zu lassen.

Ein Vorteil der a7carousel ist, dass Redakteure alle Einstellungen der Slider selbst vornehmen können, ohne dass sie dafür Zugriff auf Plugins haben müssen. Denn die Slider der a7carousel werden nicht wie für andere Extensions oft üblich über Plugins eingefügt, sondern stehen bei der Auswahl der Inhaltselementtypen zur Verfügung. Somit müssen keine speziellen Redakteursrechte dafür eingerichtet werden, wenn in Ihrer Installation alle Inhaltselementtypen im Standard erlaubt sind (d.h. im InstallTool bei "explicitADmode" der Modus "explizitDeny" gewählt ist).

Einsatz der TYPO3-Erweiterung a7carousel für einen Bild-Slider
Einsatz der TYPO3-Erweiterung a7carousel für einen Inhaltselement-Slider, der Text mit Bild präsentiert

Weitere Anwendungsmöglichkeiten

In Kombination mit der bereits erwähnten TYPO3-Extension a7styles kann der Bild-Slider durch wenige Zusatzeinstellungen auch als Slider für Videos eingesetzt werden, die dank einer Javascript-Programmierung in einer Lightbox vor dem abgedunkelten Hintergrund der Website anstatt auf einer externen Seite öffnen.

Darüber hinaus bietet die a7carousel auch den Inhaltselement-Typ "Seiten-Slider", mit dem individuell auswählbare Seiten mit einem passenden Bild mit Karuselleffekt präsentiert werden. Diese elegante Darstellung, die im hier gezeigten Beispiel mit Anzeige des Seitennamens auf dem Bild auch durch Einsatz der TYPO3-Erweiterung a7styles erzeugt wird, kann beispielsweise für die Präsentation verwandter Themen oder weiterführender Seiten eingesetzt werden.

Die Slider der a7carousel sind natürlich alle responsive und passen sich automatisch an die verschiedenen Bildschirmgrößen an. Durch die vielfältigen und teils gesonderten Einstellungsmöglichkeiten für Mobilgeräte kann zudem in kleineren Ansichten jeweils die Anzahl der auf einmal präsentierten Bilder individuell angepasst werden auf z.B. drei Bilder nebeneinander in kleineren Bildschirmen, zwei Bilder in Tablets und einem in Smartphones.

Einsatz des Bild-Slider fürs Videos, die in einem Popup öffnen
Einsatz der a7carousel als Seiten-Slider um Weiterführendes auf anderen Seiten zu präsentieren

Optionen der a7carousel im Überblick

  • ergänzt die Auswahl an Inhaltselementtypen in TYPO3, sodass Redakteuren kein Zugriff auf Plugins gegeben werden muss
  • zahlreiche Einstellungen, um den Slider für den jeweiligen Einsatz perfekt einzustellen, z.B.:
    • Geschwindigkeit des Bildwechsels
    • Übergangsgeschwindigkeit
    • Anzeige von Navigationspunkten
    • Bildreihenfolge
    • Verhalten bei Hover und in Mobilgeräten (z.B. Wischen ermöglichen)
    • verschiedene Effekte
    • Ausrichtung
    • Laufrichtung und vieles mehr
  • bestens geeignet für responsive Designs mit individuellen Einstellungsmöglichkeiten für Standardansichten (PC) und kleinere Bildschirme wie z.B. von Tablet oder Smartphone, beispielsweise:
    • Anzahl gleichzeitig zu zeigender / rollender Slides
    • Gittermodus
    • ob Blätter-Navigationspfeile pro Ansicht gewünscht sind

Nutzung der Erweiterung

Diese von a7digital entwickelte Erweiterung ist bis auf Weiteres nicht im TYPO3 Extension Repository (TER) vertreten, weil es dazu kein Handbuch gibt und die Extension nur im Kontext von bestimmten TYPO3-Installationen ausgiebig getestet wurde. Wir beschreiben sie hier dennoch, da sie ein anschauliches Beispiel für individuelle Programmierung darstellt.

Kontaktdaten Kontaktdaten
TYPO3-Websites ist ein Service von a7digital.
German
English