FlexSlider for TYPO3

FlexSlider ist seit 2015 veraltet, aber immer noch auf tausenden TYPO3-Websites aktiv

FlexSlider war zwischen 2012 und 2015 einer der beliebtesten Slider für Websites: jQuery-basiert, responsive, mit Animations-Optionen. Die jQuery-Library FlexSlider.js hatte auf GitHub über 10.000 Stars. Das letzte Update erschien 2015. Seitdem hat sich die Web-Entwicklung fundamental verändert: jQuery ist nicht mehr nötig, Core Web Vitals bestrafen schwere JavaScript-Libraries, und Touch-Events funktionieren nativ ohne Library. Trotzdem läuft FlexSlider auf tausenden TYPO3-Websites, weil die Migration nie Priorität hatte.

Die TYPO3-Extension EXT:flexslider bindet die FlexSlider.js-Library ein und bietet ein Backend-Plugin zur Konfiguration von Slides (Bild, Text, Link, Animations-Effekt). Die Extension selbst ist nicht mehr gepflegt und unterstützt maximal TYPO3 v10. Jede TYPO3-Website mit FlexSlider hat ein Migrations-Thema.

Typical use cases

Startseiten-Slider mit wechselnden Kampagnenbildern. Der klassische Einsatz: 3-5 großformatige Bilder auf der Startseite, die automatisch durchrotieren. Marketing wechselt die Slider-Inhalte saisonal. Diese Slider laden typischerweise 3-5 Bilder gleichzeitig (15-25 MB Daten), dazu jQuery (90 KB) und FlexSlider.js (30 KB). Das Ergebnis: 4+ Sekunden Ladezeit für den sichtbaren Bereich (LCP). Die moderne Alternative: Ein einzelnes Hero-Bild statt Slider (höhere Conversion laut A/B-Tests) oder ein CSS-basierter Slider ohne JavaScript.

Produkt-Bildergalerien mit Thumbnails. FlexSlider wurde oft als Thumbnail-Galerie auf Produktseiten eingesetzt: großes Hauptbild oben, Thumbnail-Leiste unten. Beim Klick auf ein Thumbnail wechselt das Hauptbild. Diese Funktion lässt sich heute mit 30 Zeilen CSS und 10 Zeilen Vanilla JavaScript umsetzen, ohne externe Library.

Testimonial-Karussells. Kundenstimmen als rootierende Zitate, oft mit Autoplay-Animation. FlexSlider bot dafür einen “Carousel”-Modus. Moderne Alternative: CSS Scroll Snap mit scroll-behavior: smooth. Kein JavaScript nötig, volle Touch-Unterstützung, unter 1 KB Code.

Technical architecture

EXT:flexslider besteht aus drei Teilen: einem Content-Element-Plugin (FlexForm mit Slide-Konfiguration), Fluid-Templates für die Frontend-Darstellung und der FlexSlider.js-Library mit jQuery als Abhängigkeit.

Im Backend konfiguriert der Redakteur: Anzahl der Slides, Bild, Überschrift, Text, Link, Animations-Effekt (slide, fade), Autoplay (ja/nein), Autoplay-Geschwindigkeit, Navigation (Pfeile, Punkte, Thumbnails) und Responsive-Breakpoints. Die Daten werden in der FlexForm-XML-Struktur des Content-Elements gespeichert.

Im Frontend lädt TYPO3 jQuery (falls nicht bereits vorhanden), flexslider.js und flexslider.css. Ein Initialisierungs-Script aktiviert den Slider mit den konfigurierten Optionen. Das Rendering erfolgt als <div class="flexslider"><ul class="slides"><li> Struktur.

Die Performance-Probleme sind architekturbedingt: FlexSlider lädt alle Slides beim Seitenaufruf (kein Lazy Loading), jQuery blockiert das Rendering (render-blocking Resource), die Animations-Engine nutzt JavaScript statt CSS-Transitions (höherer CPU-Verbrauch auf Mobilgeräten).

Common problems and solutions

Schlechte Core Web Vitals durch FlexSlider. LCP über 4 Sekunden, CLS über 0.25 (Layout-Shift beim Laden), TBT über 300ms (JavaScript-Blocking). Das ist kein Tuning-Problem, das ist ein Architektur-Problem. Lösung: FlexSlider durch eine moderne Alternative ersetzen. Swiper (kein jQuery, Lazy Loading, CSS-Transitions) oder Splide (leichter als Swiper, 29 KB statt 140 KB) sind die Standardalternativen. Noch besser: keinen Slider verwenden und durch ein statisches Hero-Element ersetzen.

jQuery-Konflikte. TYPO3 v12 liefert kein jQuery mehr im Core. FlexSlider braucht jQuery. Wer jQuery nur für FlexSlider einbindet, lädt 90 KB für eine Library, die sonst nirgends genutzt wird. Lösung: Bei der Slider-Migration jQuery komplett entfernen und alle jQuery-abhängigen Komponenten gleichzeitig migrieren.

Responsive Bilder funktionieren nicht. FlexSlider kennt kein <picture>-Element und kein srcset. Jedes Gerät lädt dasselbe Bild, egal ob Desktop (1920px) oder Smartphone (375px). Lösung: Swiper und Splide unterstützen srcset und <picture> nativ. Bei der Migration werden die Bilder über TYPO3s Image-Processing in mehreren Größen erzeugt und per srcset ausgeliefert.

Migration and version compatibility

FlexSlider hat keine TYPO3 v12- oder v13-Kompatibilität und wird keine bekommen. Die jQuery-Library ist End-of-Life. Jedes TYPO3-Projekt, das auf v12/v13 migriert, muss FlexSlider ersetzen.

Die Migration erfolgt in vier Schritten: erstens die bestehenden Slider-Daten exportieren (Bilder, Texte, Links aus der FlexForm-Konfiguration), zweitens ein neues Content-Element mit Swiper oder Splide aufsetzen (als Custom Content Element im Sitepackage), drittens die Slider-Daten in die neue Struktur importieren und viertens die alten FlexSlider-Referenzen auf das neue Element migrieren (SQL-Update der tt_content-Tabelle).

Der Migrationsaufwand liegt bei 1-2 Tagen für den technischen Umbau und 0,5-1 Tag für die Datenmigration bei 10-20 Slidern. Die Alternative ohne Slider (statisches Hero-Element) ist noch schneller: 0,5 Tage für das neue Template, die Daten des ersten Slides werden übernommen, die restlichen entfallen.

Gosign empfiehlt bei jeder FlexSlider-Migration die Grundsatzfrage: Brauchen Sie wirklich einen Slider? A/B-Tests zeigen konsistent, dass statische Hero-Elemente höhere Conversion-Raten erzielen als rotierende Slider. Falls doch ein Slider nötig ist, liefert Gosign die Migration auf Swiper oder Splide inklusive Performance-Optimierung.