Slick Carousel para TYPO3

Slick Carousel obliga a las webs TYPO3 a cargar jQuery, aunque hace años que existen alternativas sin él

Slick (de Ken Wheeler) fue entre 2014 y 2020 el slider JavaScript más popular. Para TYPO3 existe con slickcarousel una extensión que integra Slick como elemento de contenido. El problema en 2026: Slick depende de jQuery. El último release data de 2017 (v1.8.1). Sin actualizaciones desde hace más de 8 años, sin correcciones de errores, sin parches de seguridad.

jQuery ya lo necesitan cada vez menos proyectos TYPO3. TYPO3 v12 y v13 no incluyen jQuery por defecto. Quien usa Slick Carousel debe cargar jQuery (90 KB minificado) como dependencia adicional, solo para el slider.

Escenarios de uso habituales

Carruseles de imágenes en subpáginas. Páginas de producto o galerías con 5 a 20 imágenes como slider horizontal con flechas de navegación y dots opcionales. Los datos de analítica muestran que los usuarios rara vez pasan de la tercera imagen.

Sliders de testimonios. Citas de clientes que rotan como carrusel. Cada slide muestra cita, nombre y opcionalmente foto.

Slider de logos para referencias. Una barra horizontal con 10 a 30 logos de clientes en rotación automática. Este escenario se puede reemplazar fácilmente por una solución solo CSS (animación CSS con @keyframes), completamente sin JavaScript.

Arquitectura técnica

La extensión slickcarousel para TYPO3 incluye la librería Slick (slick.min.js, 43 KB) y el CSS asociado (8 KB). jQuery (90 KB) se carga como dependencia. El elemento de contenido permite configurar: slides to show, autoplay, velocidad, dots, flechas, efecto fade, breakpoints responsive. La configuración se almacena como atributo data en el contenedor del slider.

Problemas frecuentes y soluciones

El slider salta al cargar (Layout Shift). Slick inicializa por JavaScript. Hasta que el script carga, todas las imágenes se muestran apiladas verticalmente. Luego el layout salta generando un Cumulative Layout Shift (CLS) medible. Solución a corto plazo: reglas CSS que dimensionen el contenedor antes de la inicialización JavaScript. Solución a largo plazo: migrar a una librería que evite CLS nativamente.

Los eventos táctiles no funcionan consistentemente. El manejo táctil de Slick se basa en una implementación propia que ya no funciona correctamente en versiones actuales de iOS y Android. No hay fix posible porque Slick ya no se mantiene. La migración es la única opción.

Deficiencias de accesibilidad. Slick genera markup que no cumple WCAG: faltan ARIA labels, no hay navegación por teclado, autoplay sin botón de pausa. Conforme a la Directiva Europea de Accesibilidad y la normativa española vigente, las webs nuevas deben cumplir WCAG 2.1 AA. Slick Carousel no pasa ese test.

Migración y compatibilidad de versiones

La extensión slickcarousel soporta TYPO3 v10 y v11. Para v12 y v13 no hay release oficial (estado: abril 2026). La librería Slick está congelada desde 2017.

Gosign migra sliders Slick a Swiper (175+ funcionalidades, touch-native, sin jQuery, 40 KB) o Splide (conforme a WCAG, sin jQuery, 30 KB). La migración incluye tres pasos: inventariar configuraciones, integrar la nueva librería, adaptar plantillas Fluid. Por slider, de 2 a 4 horas. Para una web con 5 tipos de slider diferentes, el proyecto se completa en 2 a 3 días.

Para sliders de logos, Gosign recomienda una solución pura CSS: una animación CSS (@keyframes scroll) mueve los logos horizontalmente. Resultado: 0 KB overhead JavaScript. Para sliders de testimonios y contenido, Splide es la recomendación por su soporte ARIA completo y navegación por teclado.

La mejora media de PageSpeed en proyectos migrados de Slick a Splide fue de 12 a 25 puntos, primordialmente por la eliminación de jQuery y el menor tamaño de librería.