FlexSlider dla TYPO3

FlexSlider jest przestarzały od 2015, ale nadal aktywny na tysiącach witryn TYPO3

FlexSlider był między 2012 a 2015 jednym z najpopularniejszych sliderów: oparty na jQuery, responsywny, z opcjami animacji. Biblioteka jQuery FlexSlider.js miała na GitHubie ponad 10 000 gwiazdek. Ostatnia aktualizacja ukazała się w 2015. Od tego czasu rozwój webowy zmienił się fundamentalnie: jQuery nie jest już potrzebny, Core Web Vitals karzą ciężkie biblioteki JavaScript, a zdarzenia dotykowe działają natywnie. Mimo to FlexSlider działa na tysiącach witryn TYPO3, bo migracja nigdy nie miała priorytetu.

Rozszerzenie TYPO3 EXT:flexslider osadza bibliotekę FlexSlider.js i oferuje plugin backendowy do konfiguracji slajdów. Samo rozszerzenie nie jest już utrzymywane i obsługuje maksymalnie TYPO3 v10. Każda witryna TYPO3 z FlexSlider ma temat migracji.

Typowe scenariusze zastosowania

Slider strony głównej z obrazami kampanii. Klasyczne zastosowanie: 3-5 wielkoformatowych obrazów na stronie głównej, automatycznie rotujących. Te slidery typowo ładują 3-5 obrazów jednocześnie (15-25 MB danych), plus jQuery (90 KB) i FlexSlider.js (30 KB). Wynik: ponad 4 sekundy czasu ładowania widocznego obszaru (LCP). Nowoczesna alternatywa: pojedynczy obraz hero zamiast slidera (wyższa konwersja wg testów A/B) lub slider oparty wyłącznie na CSS bez JavaScript.

Galerie produktowe z miniaturami. FlexSlider był często używany jako galeria miniatur na stronach produktów: duży obraz główny na górze, pasek miniatur na dole. Tę funkcję można dziś zrealizować w 30 liniach CSS i 10 liniach Vanilla JavaScript, bez zewnętrznej biblioteki.

Karuzele z opiniami. Głosy klientów jako rotujące cytaty, często z animacją autoplay. FlexSlider oferował tryb “Carousel”. Nowoczesna alternatywa: CSS Scroll Snap z scroll-behavior: smooth. Bez JavaScript, pełne wsparcie dotyku, poniżej 1 KB kodu.

Architektura techniczna

EXT:flexslider składa się z trzech części: pluginu Content Element (FlexForm z konfiguracją slajdów), szablonów Fluid do prezentacji frontendowej i biblioteki FlexSlider.js z jQuery jako zależnością.

W backendzie redaktor konfiguruje: liczbę slajdów, obraz, nagłówek, tekst, link, efekt animacji (slide, fade), autoplay (tak/nie), prędkość autoplay, nawigację (strzałki, kropki, miniatury) i responsywne breakpointy. Dane są przechowywane w strukturze FlexForm-XML elementu treści.

Na frontendzie TYPO3 ładuje jQuery (jeśli nie jest dostępne), flexslider.js i flexslider.css. Skrypt inicjalizacyjny aktywuje slider ze skonfigurowanymi opcjami. Problemy wydajnościowe są uwarunkowane architekturą: FlexSlider ładuje wszystkie slajdy przy wywołaniu strony (brak lazy loading), jQuery blokuje renderowanie, silnik animacji używa JavaScript zamiast przejść CSS.

Częste problemy i rozwiązania

Słabe Core Web Vitals. LCP powyżej 4 sekund, CLS powyżej 0.25, TBT powyżej 300ms. To nie jest problem tuningu, to jest problem architektury. Rozwiązanie: zastąpienie FlexSlider nowoczesną alternatywą. Swiper (bez jQuery, Lazy Loading, przejścia CSS) lub Splide (lżejszy, 29 KB zamiast 140 KB). Jeszcze lepiej: nie używać slidera i zastąpić statycznym elementem hero.

Konflikty jQuery. TYPO3 v12 nie dostarcza już jQuery w rdzeniu. FlexSlider potrzebuje jQuery. Kto osadza jQuery tylko dla FlexSlider, ładuje 90 KB na bibliotekę nieużywaną nigdzie indziej. Rozwiązanie: przy migracji slidera całkowite usunięcie jQuery i jednoczesna migracja wszystkich komponentów zależnych od jQuery.

Responsywne obrazy nie działają. FlexSlider nie zna elementu <picture> ani srcset. Każde urządzenie ładuje ten sam obraz. Rozwiązanie: Swiper i Splide obsługują srcset i <picture> natywnie.

Migracja i kompatybilność wersji

FlexSlider nie ma kompatybilności z TYPO3 v12 lub v13. Biblioteka jQuery jest End-of-Life. Każdy projekt TYPO3 migrujący na v12/v13 musi zastąpić FlexSlider.

Migracja odbywa się w czterech krokach: eksport istniejących danych slidera z FlexForm, stworzenie nowego Content Element z Swiper lub Splide, import danych do nowej struktury i migracja starych referencji FlexSlider (aktualizacja SQL tabeli tt_content).

Nakład migracji to 1-2 dni na przebudowę techniczną i 0,5-1 dzień na migrację danych przy 10-20 sliderach. Gosign rekomenduje przy każdej migracji FlexSlider zasadnicze pytanie: czy naprawdę potrzebujesz slidera? Testy A/B konsekwentnie pokazują, że statyczne elementy hero osiągają wyższe wskaźniki konwersji niż rotujące slidery.