Alternatives à Swiper pour React, selon ce que vous fuyez réellement
Personne ne quitte Swiper parce qu'il est mauvais — c'est le slider le plus complet qui existe. Les gens le quittent à cause du poids (≈40 kB avant les modules), parce qu'ils héritent de son DOM et de son CSS, ou parce que leur « slider » n'a jamais vraiment été des diapositives. Chaque plainte a une meilleure réponse différente.
| Swiper | Embla | keen-slider | react-horizontal-scrolling-menu | |
|---|---|---|---|---|
| Bundle (cœur, min+gzip) | ≈40 kB | ≈8 kB | ≈7 kB | ≈5,7 kB |
| Modèle | Diapositives, tout-inclus | Diapositives, headless | Diapositives, moteur minimal | Éléments dans une rangée à défilement natif |
| Effets et modules | Le plus riche disponible | Plugins / fait main | Quelques-uns intégrés | Aucun — des recettes à la place |
| Possède la couche de gestes | Oui (transformations) | Oui (transformations) | Oui (transformations) | Non — le navigateur défile |
| Visibilité par élément | Événements d'index de diapositive | Événements d'index de diapositive | Événements d'index de diapositive | Intégrée (useIsVisible) |
| Meilleur remplacement quand | — | Vous stylez tout de toute façon | Slider minimal, sans dépendance à React | Les « diapositives » sont des éléments cliquables |
Les tailles sont des cœurs approximatifs — celui de Swiper croît avec les modules importés, ce qui signifie aussi qu'un build Swiper allégé est plus petit que sa réputation.
Fuir les kilo-octets : Embla ou keen-slider
Si le produit est un vrai carrousel — alignement, une page de diapositives à la fois — les moteurs légers sont presque des remplacements directs :
- Embla (≈8 kB) : headless, physique superbe, hook React de premier ordre, le moteur sous le carrousel de shadcn/ui. Vous apportez tout le balisage et le CSS — c'est le principe.
- keen-slider (≈7 kB) : un moteur minimal agnostique du framework, pratique quand le même slider doit être livré sur des surfaces React et non React.
Les deux conservent le modèle de diapositives basé sur les transformations, donc des effets comme le fondu ou le coverflow restent à faire soi-même — si vous en dépendez, un build Swiper allégé est honnêtement la meilleure réponse plutôt que de les réimplémenter.
Fuir le modèle de diapositives : le cas en forme de menu
L'autre sortie concerne les projets où la sémantique de diapositives de Swiper n'a jamais vraiment été essentielle : rangées de catégories, murs de logos, barres d'onglets, barres de puces, rails de produits. Les indices sont une configuration comme slidesPerView: 'auto' combinée à freeMode: true — cette paire, c'est Swiper qu'on demande d'imiter le défilement natif.
react-horizontal-scrolling-menu (≈5,7 kB) est ce défilement natif, plus les parties que le navigateur ne fournit pas : visibilité par élément, défilement vers un élément, des flèches conscientes des bords et un glisser qui ne casse pas les clics. Aucun effet, aucun alignement, aucune émulation de gestes — voir les pages rangée Netflix, onglets et barre de puces, ou le tableau complet.
Un avertissement équitable dans les deux sens
Migrer hors de Swiper pour économiser du poids, puis reconstruire à la main la lecture automatique, la pagination, les annonces a11y et les effets, c'est ainsi qu'un problème de 40 kB devient un problème d'un mois-personne. Passez à un moteur plus léger quand votre usage est réellement un sous-ensemble — et à un menu défilant seulement quand la sémantique de diapositives était factice depuis le début. Si vous utilisez la profondeur de Swiper, gardez Swiper.