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. Po v1.8.1 z 2017 roku, którą dołącza rozszerzenie, kolejne wydanie ukazało się dopiero w lipcu 2026: Slick 2.0 działa z jQuery 4, ale nadal wymaga jQuery.

jQuery samo jest potrzebne coraz mniejszej liczbie projektów TYPO3. Rdzeń TYPO3 nie dołącza jQuery we frontendzie, a opcja do tego zniknęła już w TYPO3 10. 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). Rozszerzenie domyślnie ładuje własne jQuery (90 KB), które można wyłączyć stałą, a ponadto wymaga rozszerzenia vhs. 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. W rozszerzeniu nie ma poprawki, bo nie jest już utrzymywane i dołącza Slick 1.8.1. Migracja to jedyna opcja.

Braki dostępności. Slick generuje markup niezgodny z WCAG: strzałki i kropki mają wprawdzie etykiety ARIA i obsługę klawiatury, ale autoplay nie ma 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, v13 i v14 nie ma wydania, repozytorium jest zarchiwizowane, a na Packagist oznaczone jako porzucone (stan wrzesień 2026). Sama biblioteka Slick od 2017 do lipca 2026 pozostawała na v1.8.1, od tego czasu jest Slick 2.0.

Gosign migruje slidery oparte na Slick na Swiper (modułowy, natywny dotyk, bez jQuery, 67 KB zminimalizowany bez modułów) 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) sklepy internetowe i inne strony, przez które konsumenci zawierają umowy, muszą być dostępne, w praktyce według 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.