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. Tras la v1.8.1 de 2017, que es la que incluye la extensión, no hubo otro release hasta julio de 2026: Slick 2.0 funciona con jQuery 4, pero sigue necesitando jQuery.

jQuery ya lo necesitan cada vez menos proyectos TYPO3. El core de TYPO3 no incluye jQuery en el frontend; la opción para hacerlo desapareció ya con TYPO3 10. 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). La extensión carga por defecto su propio jQuery (90 KB), desactivable mediante una constante, y además requiere la extensión vhs. El elemento de contenido permite configurar: slides to show, autoplay, velocidad, dots, flechas, efecto fade, breakpoints responsive. La extensión escribe la configuración en un script inline mediante un ViewHelper de vhs.

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. En la extensión no hay fix posible, porque ya no se mantiene e incluye Slick 1.8.1. La migración es la única opción.

Deficiencias de accesibilidad. Slick genera markup que no cumple WCAG: flechas y dots tienen ARIA labels y control por teclado, pero el autoplay no tiene botón de pausa. Conforme a la Directiva Europea de Accesibilidad (en España, la Ley 11/2023), las tiendas online y demás webs en las que los consumidores contratan deben ser accesibles desde junio de 2025, en la práctica según 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, v13 y v14 no hay release; el repositorio está archivado y en Packagist figura como abandonado (estado: septiembre 2026). La librería Slick se quedó en la v1.8.1 desde 2017 hasta julio de 2026; desde entonces existe Slick 2.0.

Gosign migra sliders Slick a Swiper (modular, touch-native, sin jQuery, 67 KB minificado sin módulos) 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.