Slick Carousel dla TYPO3

Slick Carousel zmusza strony TYPO3 do ładowania jQuery, choć od lat istnieją alternatywy bez niego

Slick (autorstwa Ken Wheeler) był między 2014 a 2020 najpopularniejszym sliderem JavaScript. “The last carousel you’ll ever need” obiecywała dokumentacja. Responsywny, dotykowy, Lazy Loading, Autoplay, Infinite Scroll, Variable Width. Dla TYPO3 istnieje rozszerzenie slickcarousel wbudowujące Slick jako element treści. Problem w 2026: Slick zależy od jQuery. Ostatnie wydanie Slick pochodzi z 2017 roku (v1.8.1). Żadnych aktualizacji od ponad 8 lat, żadnych poprawek błędów, żadnych łatek bezpieczeństwa.

jQuery samo jest potrzebne coraz mniejszej liczbie projektów TYPO3. TYPO3 v12 i v13 nie dostarczają jQuery standardowo. Kto korzysta ze Slick Carousel, musi ładować jQuery (90 KB zminimalizowane) jako dodatkową zależność - tylko dla slidera. To dług techniczny kosztujący wydajność przy każdym wywołaniu strony.

Typowe scenariusze zastosowań

Karuzele obrazów na podstronach. Strony produktowe, strony referencji lub galerie z 5 do 20 obrazami wyświetlanymi jako poziomy slider. Slick renderuje obrazy ze strzałkami nawigacji i opcjonalnymi kropkami. W praktyce dane analityczne pokazują, że użytkownicy rzadko klikają dalej niż trzeci obraz.

Slidery referencji. Cytaty klientów rotujące w karuzeli. Każdy slajd pokazuje cytat, nazwisko i opcjonalnie zdjęcie. Slick jest tu często konfigurowany z centerMode i adaptiveHeight.

Slidery logo dla referencji klienckich. Poziomy pasek z 10 do 30 logami klientów automatycznie się przewijający. To scenariusz szczególnie łatwy do zastąpienia przez rozwiązanie wyłącznie CSS (animacja CSS z @keyframes), zupełnie bez JavaScript.

Architektura techniczna

Rozszerzenie slickcarousel dla TYPO3 dołącza bibliotekę Slick (slick.min.js, 43 KB) i odpowiedni CSS (slick.css + slick-theme.css, 8 KB). jQuery (90 KB) jest ładowane jako zależność. Element treści pozwala redaktorom przesyłać obrazy i konfigurować opcje slidera: Slides to Show, Autoplay, Speed, Dots, Arrows, Fade, Responsive Breakpoints.

Częste problemy i rozwiązania

Slider skacze przy ładowaniu (Layout Shift). Slick inicjalizuje slider przez JavaScript. Do załadowania i wykonania skryptu wszystkie obrazy wyświetlane są jeden pod drugim. Potem layout skacze, gdy Slick układa obrazy poziomo. To generuje mierzalny Cumulative Layout Shift (CLS) - Core Web Vital. Rozwiązanie krótkoterminowe: zdefiniowanie reguł CSS wymiarujących kontener slidera przed inicjalizacją JavaScript. Rozwiązanie długoterminowe: przejście na bibliotekę natywnie unikającą CLS.

Zdarzenia dotykowe nie działają konsystentnie. Obsługa dotyku Slick opiera się na własnej implementacji zdarzeń, która na aktualnych wersjach iOS i Android częściowo nie działa prawidłowo. Nie ma poprawki, bo Slick nie jest utrzymywany. Migracja to jedyna opcja.

Braki dostępności. Slick generuje markup niezgodny z WCAG: brakujące etykiety ARIA, brak nawigacji klawiaturą dla kropek, autoplay bez przycisku pauzy. Rozwiązanie: Splide jako alternatywa (pełne wsparcie ARIA, nawigacja klawiaturą, natywna pauza autoplay).

Migracja i kompatybilność wersji

Rozszerzenie slickcarousel wspiera TYPO3 v10 i v11. Dla TYPO3 v12 i v13 nie ma oficjalnego wydania (stan kwiecień 2026). Sama biblioteka Slick jest od 2017 zamrożona na v1.8.1.

Gosign migruje slidery oparte na Slick na Swiper (ponad 175 funkcji, natywny dotyk, bez jQuery, 40 KB) lub Splide (zgodny z WCAG, bez jQuery, 30 KB). Migracja obejmuje trzy kroki: inwentaryzacja konfiguracji sliderów, wbudowanie i konfiguracja nowej biblioteki, dostosowanie szablonów Fluid. Per slider migracja trwa 2 do 4 godzin.

Dla sliderów logo Gosign zaleca czyste rozwiązanie CSS bez JavaScript: animacja CSS (@keyframes scroll) przesuwa loga poziomo, animation-play-state: paused przy hover zatrzymuje ruch. Wynik to 0 KB overhead JavaScript i działa na wszystkich przeglądarkach.

Dla sliderów referencji i treści Gosign zaleca Splide, ponieważ rozszerzenie oferuje pełne wsparcie ARIA i nawigację klawiaturą. Od europejskiego Aktu o Dostępności (od czerwca 2025) nowe strony muszą spełniać WCAG 2.1 AA. Slick Carousel nie zdaje tego testu - Splide tak. Migracja ze Slick na Splide opłaca się więc nie tylko dla wydajności, ale też dla zgodności.