FlexSlider para TYPO3

FlexSlider está desatualizado desde 2015, mas ainda está ativo em milhares de sites TYPO3

FlexSlider foi entre 2012 e 2015 um dos sliders mais populares para sites: baseado em jQuery, responsivo, com opções de animação. A biblioteca JavaScript FlexSlider.js tinha mais de 10.000 stars no GitHub. A última atualização foi em 2015. Desde então, o desenvolvimento web mudou fundamentalmente: jQuery não é mais necessário, Core Web Vitals penalizam bibliotecas JavaScript pesadas, e eventos touch funcionam nativamente sem biblioteca. Mesmo assim, FlexSlider roda em milhares de sites TYPO3, porque a migração nunca foi prioridade.

A extensão TYPO3 EXT:flexslider integra a biblioteca FlexSlider.js e oferece um plugin backend para configuração de slides (imagem, texto, link, efeito de animação). A extensão não é mais mantida e suporta no máximo TYPO3 v10. Todo site TYPO3 com FlexSlider tem um tema de migração pendente.

Cenários típicos de uso

Slider de página inicial com imagens de campanha rotativas. O uso clássico: 3 a 5 imagens em formato grande na página inicial que rotam automaticamente. Marketing troca os conteúdos do slider sazonalmente. Esses sliders carregam tipicamente 3 a 5 imagens simultaneamente (15 a 25 MB de dados), mais jQuery (90 KB) e FlexSlider.js (30 KB). O resultado: mais de 4 segundos de tempo de carregamento para a área visível (LCP). A alternativa moderna: uma única imagem hero em vez de slider (conversão mais alta conforme testes A/B) ou um slider baseado em CSS sem JavaScript.

Galerias de imagens de produto com thumbnails. FlexSlider foi frequentemente usado como galeria de thumbnails em páginas de produto: imagem principal grande acima, barra de thumbnails abaixo. Ao clicar em um thumbnail, a imagem principal muda. Essa funcionalidade pode ser implementada hoje com 30 linhas de CSS e 10 linhas de JavaScript vanilla, sem biblioteca externa.

Carrosséis de depoimentos. Citações de clientes como cards rotativos, frequentemente com animação de autoplay. FlexSlider oferecia um modo “Carousel” para isso. Alternativa moderna: CSS Scroll Snap com scroll-behavior: smooth. Sem JavaScript necessário, suporte total a touch, menos de 1 KB de código.

Arquitetura técnica

EXT:flexslider consiste em três partes: um plugin de elemento de conteúdo (FlexForm com configuração de slides), templates Fluid para a representação frontend e a biblioteca FlexSlider.js com jQuery como dependência.

No backend, o editor configura: número de slides, imagem, título, texto, link, efeito de animação (slide, fade), autoplay (sim/não), velocidade de autoplay, navegação (setas, pontos, thumbnails) e breakpoints responsivos. Os dados são armazenados na estrutura XML FlexForm do elemento de conteúdo.

No frontend, TYPO3 carrega jQuery (se não já presente), flexslider.js e flexslider.css. Um script de inicialização ativa o slider com as opções configuradas. O rendering é feito como estrutura <div class="flexslider"><ul class="slides"><li>.

Os problemas de performance são estruturais: FlexSlider carrega todos os slides ao carregar a página (sem lazy loading), jQuery bloqueia o rendering (recurso que bloqueia a renderização), o motor de animação usa JavaScript em vez de transições CSS (maior consumo de CPU em dispositivos móveis).

Problemas frequentes e soluções

Core Web Vitals ruins por causa do FlexSlider. LCP acima de 4 segundos, CLS acima de 0.25 (layout shift durante o carregamento), TBT acima de 300ms (bloqueio JavaScript). Isso não é um problema de tuning, é um problema de arquitetura. Solução: substituir FlexSlider por uma alternativa moderna. Swiper (sem jQuery, lazy loading, transições CSS) ou Splide (mais leve que Swiper, 29 KB em vez de 140 KB) são as alternativas padrão. Melhor ainda: não usar slider e substituir por um elemento hero estático.

Conflitos jQuery. TYPO3 v12 não entrega mais jQuery no Core. FlexSlider precisa de jQuery. Quem inclui jQuery apenas para FlexSlider carrega 90 KB para uma biblioteca que não é usada em outro lugar. Solução: na migração do slider, remover jQuery completamente e migrar todos os componentes dependentes de jQuery simultaneamente.

Imagens responsivas não funcionam. FlexSlider não conhece o elemento <picture> e nem srcset. Todo dispositivo carrega a mesma imagem, seja desktop (1920px) ou smartphone (375px). Solução: Swiper e Splide suportam srcset e <picture> nativamente. Na migração, as imagens são geradas via processamento de imagens do TYPO3 em vários tamanhos e entregues via srcset.

Migração e compatibilidade de versões

FlexSlider não tem compatibilidade com TYPO3 v12 ou v13 e não terá. A biblioteca jQuery é end-of-life. Todo projeto TYPO3 que migra para v12/v13 deve substituir FlexSlider.

A migração ocorre em quatro passos: primeiro, exportar os dados existentes dos sliders (imagens, textos, links da configuração FlexForm); segundo, configurar um novo elemento de conteúdo com Swiper ou Splide (como Custom Content Element no sitepackage); terceiro, importar os dados dos sliders na nova estrutura; e quarto, migrar as referências FlexSlider antigas para o novo elemento (atualização SQL da tabela tt_content).

O esforço de migração é de 1 a 2 dias para a reestruturação técnica e 0,5 a 1 dia para a migração de dados com 10 a 20 sliders. A alternativa sem slider (elemento hero estático) é ainda mais rápida: 0,5 dia para o novo template, os dados do primeiro slide são aproveitados, os restantes são descartados.

A Gosign recomenda em toda migração FlexSlider a pergunta fundamental: você realmente precisa de um slider? Testes A/B mostram consistentemente que elementos hero estáticos alcançam taxas de conversão mais altas que sliders rotativos. Se mesmo assim um slider for necessário, a Gosign entrega a migração para Swiper ou Splide incluindo otimização de performance.