Migrar angular-carousel / slick-carousel (angular-slick) a Angular moderno
angular-carousel ofrecía un carrusel táctil con la directiva rn-carousel, y angular-slick envolvía el plugin de jQuery slick-carousel. Ambos envoltorios están atados a AngularJS, y slick necesita jQuery.
Qué la reemplaza
| Opción | Cuándo elegirla |
|---|---|
| Swiper | Completo e independiente del framework; en Angular se usa mediante sus custom elements (swiper-container). |
| Embla Carousel (embla-carousel-angular, community wrapper) | Un carrusel pequeño y sin estilos, para cuando escribes tu propio HTML y CSS. |
| CSS scroll snap | Para una fila simple de slides, el CSS nativo alcanza y no necesita JavaScript. |
Cómo migrarla
- Lista las opciones que usa cada carrusel: autoplay, loop, slides por vista, breakpoints, puntos y flechas.
- Construye un componente de carrusel compartido que reciba los slides y un objeto de opciones pequeño. Con Swiper, agrega CUSTOM_ELEMENTS_SCHEMA a ese componente.
- Reemplaza cada carrusel junto con su pantalla, y elimina slick y jQuery cuando no quede ningún carrusel legacy.
Cuidado con. Los carruseles miden sus slides al iniciar. Si los slides vienen de una llamada HTTP, inicializa o actualiza el carrusel después de renderizar los datos, o tendrás anchos y cantidades de slides incorrectos.
Otras librerías
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn