Alternatives à react-slick : migrez selon ce que vous avez construit avec
react-slick porte le carrousel slick de l'ère jQuery vers React. Ça fonctionne encore, mais l'architecture est antérieure aux hooks, les publications sont rares, et cela traîne un fichier CSS séparé dans chaque build. Le bon remplaçant dépend moins des fonctionnalités que du camp parmi deux dans lequel se range votre usage.
| react-slick | Embla | Swiper | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Ce que c'est | Portage React de slick jQuery | Moteur de carrousel headless | Framework de slider complet | Menu défilant, défilement natif |
| Maintenance | Rare | Active | Active | Active depuis 2018 |
| Bundle (min+gzip) | ≈15 kB + CSS slick | ≈8 kB | ≈40 kB | ≈5,7 kB |
| Fichier CSS supplémentaire requis | Oui (deux) | Non | Oui (cœur) | Un seul, ou Tailwind via l'élément shadcn |
| Sémantique de diapositives (alignement, points, fondu) | Oui | Oui | Oui | Non — délibérément |
| Rangées d'éléments cliquables | Détourné via centerMode | Fait main sur le moteur | Configuré à contre-courant | Le cas d'usage principal |
Les tailles sont des cœurs approximatifs. La dernière colonne est la propre bibliothèque de ce site — le tableau le dit plutôt que de prétendre le contraire.
Premier camp : c'était un vrai carrousel
Sliders héros, galeries d'images, rotateurs de témoignages — tout ce où les points, le fondu et la lecture automatique de slick portaient le design. Migrez vers un vrai moteur de carrousel :
- Embla si vous stylez tout vous-même et voulez un petit cœur headless — ce qui se rapproche le plus de « slick, modernisé » dans l'esprit.
- Swiper si vous utilisiez abondamment la liste de fonctionnalités de slick ; chaque fonctionnalité de slick a un équivalent Swiper, généralement meilleur.
Faites correspondre slidesToShow/slidesToScroll aux slidesInView/slidesToScroll d'Embla ou aux slidesPerView/slidesPerGroup de Swiper, et attendez-vous à supprimer vos surcharges CSS de positionnement de flèches — les deux successeurs vous laissent rendre vos propres boutons.
Deuxième camp : c'était de la navigation déguisée en centerMode
L'autre installation de slick est la discrète : une rangée de catégories, de logos, de dates ou de filtres, tordue en carrousel avec centerMode, focusOnSelect et variableWidth parce que slick était déjà dans le bundle. L'indice révélateur, c'est ce contre quoi vous vous battiez : des clics se déclenchant après des glissers, des flèches au mauvais moment, des éléments que vous ne pouviez pas mesurer, un alignement dont vous ne vouliez pas.
Cette rangée était un menu. react-horizontal-scrolling-menu fait les trois choses que centerMode simulait — centrer l'élément cliqué, défiler nativement avec le support du glisser, et signaler quels éléments sont visibles — en ≈5,7 kB sans aucun moteur de slider. Voir les pages onglets défilants et rail de catégories pour les deux formes les plus courantes.
Quel que soit le camp : la migration est plus petite qu'il n'y paraît
La surface d'API de slick est large, mais les audits de configurations réelles se réduisent vite : la plupart des projets utilisent une poignée de props. Listez celles que vous utilisez réellement, décidez dans quel camp se situe chaque usage, et migrez instance par instance — les deux camps coexistent souvent dans une même base de code, et rien n'impose qu'ils atterrissent tous deux sur la même bibliothèque.