Slick Carousel para TYPO3

Slick Carousel força sites TYPO3 a carregar jQuery, embora existam alternativas sem ele há anos

Slick (de Ken Wheeler) foi entre 2014 e 2020 o slider JavaScript mais popular. “The last carousel you’ll ever need” prometia a documentação. Responsivo, touch-capable, lazy loading, autoplay, infinite scroll, variable width. Para TYPO3 existe com slickcarousel uma extensão que incorpora Slick como elemento de conteúdo. O problema em 2026: Slick depende de jQuery. O último release Slick é de 2017 (v1.8.1). Nenhuma atualização em mais de 8 anos, sem correções de bugs, sem patches de segurança.

jQuery já não é necessário em cada vez menos projetos TYPO3. TYPO3 v12 e v13 não distribuem mais jQuery por padrão. Quem usa Slick Carousel precisa carregar jQuery (90 KB minificado) como dependência adicional, apenas para o slider. Isso é dívida técnica que custa performance a cada carregamento de página.

Cenários típicos de uso

Carrosséis de imagens em subpáginas. Páginas de produto, referências ou galerias com 5 a 20 imagens que podem ser folheadas como slider horizontal. Na prática, dados de analytics mostram que usuários raramente clicam além da terceira imagem.

Slider de depoimentos. Citações de clientes que rotacionam como carrossel. Cada slide exibe uma citação, o nome e opcionalmente uma foto. Slick é frequentemente configurado aqui com centerMode e adaptiveHeight.

Slider de logos para referências de clientes. Uma faixa horizontal com 10 a 30 logos de clientes em rotação automática. Este cenário é particularmente fácil de substituir por soluções CSS-only (animação CSS com @keyframes), completamente sem JavaScript.

Arquitetura técnica

A extensão slickcarousel para TYPO3 inclui a biblioteca Slick (slick.min.js, 43 KB) e o CSS correspondente (slick.css + slick-theme.css, 8 KB). jQuery (90 KB) é carregado como dependência. O elemento de conteúdo permite que editores façam upload de imagens e configurem opções do slider: slides to show, autoplay, dots, arrows, efeito fade, breakpoints responsivos.

A integração TYPO3 usa um template Fluid que renderiza as imagens como elementos <div> dentro do container do slider.

Problemas frequentes e soluções

Slider pula ao carregar (layout shift). Slick inicializa o slider via JavaScript. Até o script ser carregado e executado, todas as imagens são exibidas empilhadas verticalmente. Depois o layout pula quando Slick organiza as imagens horizontalmente. Isso gera Cumulative Layout Shift (CLS) mensurável, um Core Web Vital. Solução a longo prazo: migrar para uma biblioteca que evita CLS nativamente.

Eventos touch não funcionam consistentemente. O tratamento touch do Slick é baseado em uma implementação própria de eventos que não funciona mais corretamente em versões atuais de iOS e Android. Solução: não existe correção, porque Slick não é mais mantido. Migração é a única opção.

Deficiências de acessibilidade. Slick gera markup que não é conforme WCAG: labels ARIA ausentes, sem navegação por teclado para dots, autoplay sem botão de pausa. Solução: Splide como alternativa (suporte ARIA completo, navegação por teclado, pausa de autoplay nativa).

Migração e compatibilidade de versões

A extensão slickcarousel suporta TYPO3 v10 e v11. Para TYPO3 v12 e v13 não existe release oficial (status abril 2026). A biblioteca Slick em si está congelada na v1.8.1 desde 2017.

A Gosign migra sliders baseados em Slick para Swiper (mais de 175 recursos, touch-native, sem jQuery, 40 KB) ou Splide (conforme WCAG, sem jQuery, 30 KB). A migração abrange três etapas: inventariar configurações de slider, incluir e configurar a nova biblioteca, adaptar templates Fluid. Por slider, a migração leva 2 a 4 horas. Em um site com 5 tipos diferentes de slider, o projeto é concluído em 2 a 3 dias.

Para sliders de logo, a Gosign recomenda uma solução CSS pura sem JavaScript: uma animação CSS (@keyframes scroll) move os logos horizontalmente, animation-play-state: paused no hover para o movimento. O resultado é 0 KB de overhead JavaScript.

A Gosign documenta após cada migração de slider a melhoria de performance: PageSpeed Score antes/depois, remoção de jQuery, delta de Core Web Vitals. Em projetos migrados de Slick para Splide, a melhoria média de PageSpeed foi de 12 a 25 pontos, principalmente pela eliminação do jQuery e pelo menor tamanho da biblioteca.