Migrating angular-carousel / slick-carousel (angular-slick) to modern Angular
angular-carousel provided a touch carousel through the rn-carousel directive, and angular-slick wrapped the jQuery plugin slick-carousel. Both wrappers are tied to AngularJS, and slick needs jQuery.
What replaces it
| Option | When to choose it |
|---|---|
| Swiper | Full-featured and framework-agnostic; used in Angular through its custom elements (swiper-container). |
| Embla Carousel (embla-carousel-angular, community wrapper) | A small, unstyled carousel when you write your own markup and CSS. |
| CSS scroll snap | For a simple row of slides, native CSS is enough and needs no JavaScript. |
How to migrate it
- List the options each carousel uses: autoplay, loop, slides per view, breakpoints, dots and arrows.
- Build one shared carousel component that receives the slides and a small options object. With Swiper, add CUSTOM_ELEMENTS_SCHEMA to that component.
- Replace each carousel with its screen, and remove slick and jQuery once no legacy carousel is left.
Watch out. Carousels measure their slides when they start. If the slides come from an HTTP call, initialize or update the carousel after the data is rendered, or you get wrong widths and slide counts.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn