FlexSlider para TYPO3

FlexSlider está obsoleto desde 2015, pero sigue activo en miles de sitios web TYPO3

FlexSlider fue entre 2012 y 2015 uno de los sliders más populares para sitios web: basado en jQuery, responsive, con opciones de animación. La librería jQuery FlexSlider.js tenía más de 10.000 estrellas en GitHub. La última actualización se publicó en 2015. Desde entonces, el desarrollo web ha cambiado fundamentalmente: jQuery ya no es necesario, los Core Web Vitals penalizan las librerías JavaScript pesadas y los eventos táctiles funcionan nativamente sin librería.

La extensión TYPO3 EXT:flexslider integra la librería FlexSlider.js y ofrece un plugin de backend para configurar diapositivas (imagen, texto, enlace, efecto de animación). La extensión ya no se mantiene y soporta como máximo TYPO3 v10. Todo sitio web TYPO3 con FlexSlider tiene pendiente una migración.

Escenarios de uso habituales

Slider de página de inicio con imágenes de campaña cambiantes. El uso clásico: 3-5 imágenes de gran formato en la página de inicio que rotan automáticamente. Estos sliders cargan típicamente 3-5 imágenes simultáneamente (15-25 MB de datos), más jQuery (90 KB) y FlexSlider.js (30 KB). La alternativa moderna: una única imagen hero estática en lugar de slider (mayor conversión según tests A/B) o un slider basado en CSS sin JavaScript.

Galerías de imágenes de producto con miniaturas. FlexSlider se usaba a menudo como galería de miniaturas en páginas de producto. Esta función se puede implementar hoy con 30 líneas de CSS y 10 líneas de JavaScript vanilla, sin librería externa.

Carruseles de testimonios. Citas de clientes como textos que rotan, a menudo con animación autoplay. Alternativa moderna: CSS Scroll Snap con scroll-behavior: smooth. Sin JavaScript necesario, soporte táctil completo, menos de 1 KB de código.

Arquitectura técnica

EXT:flexslider consta de tres partes: un plugin de elemento de contenido (FlexForm con configuración de diapositivas), plantillas Fluid para la presentación frontend y la librería FlexSlider.js con jQuery como dependencia.

Los problemas de rendimiento son estructurales: FlexSlider carga todas las diapositivas al cargar la página (sin lazy loading), jQuery bloquea el renderizado (recurso bloqueante), el motor de animación usa JavaScript en lugar de transiciones CSS (mayor consumo de CPU en dispositivos móviles).

Problemas frecuentes y soluciones

Core Web Vitals deficientes por FlexSlider. LCP superior a 4 segundos, CLS superior a 0.25, TBT superior a 300ms. Esto no es un problema de ajuste, es un problema de arquitectura. Solución: reemplazar FlexSlider por una alternativa moderna. Swiper (sin jQuery, lazy loading, transiciones CSS) o Splide (más ligero que Swiper, 29 KB frente a 140 KB). Mejor aún: no usar slider y sustituir por un elemento hero estático.

Conflictos con jQuery. TYPO3 v12 ya no incluye jQuery en el Core. FlexSlider necesita jQuery. Solución: en la migración del slider, eliminar jQuery completamente y migrar simultáneamente todos los componentes dependientes de jQuery.

Las imágenes responsive no funcionan. FlexSlider no conoce el elemento <picture> ni srcset. Cada dispositivo carga la misma imagen. Solución: Swiper y Splide soportan srcset y <picture> nativamente.

Migración y compatibilidad de versiones

FlexSlider no tiene compatibilidad con TYPO3 v12 o v13 y no la tendrá. La librería jQuery está en fin de vida. Cada proyecto TYPO3 que migra a v12/v13 debe reemplazar FlexSlider.

La migración se realiza en cuatro pasos: primero exportar los datos de diapositivas existentes, segundo configurar un nuevo elemento de contenido con Swiper o Splide, tercero importar los datos de diapositivas en la nueva estructura y cuarto migrar las referencias FlexSlider antiguas al nuevo elemento.

El esfuerzo de migración es de 1-2 días para la conversión técnica y 0,5-1 día para la migración de datos con 10-20 sliders. Gosign recomienda en cada migración de FlexSlider la pregunta fundamental: ¿Realmente necesita un slider? Los tests A/B muestran consistentemente que los elementos hero estáticos logran tasas de conversión más altas que los sliders rotativos.