Adieu les sliders lourds, bonjour au scroll-snap natif ?
Pendant des années, afficher une galerie ou un carrousel sur mobile impliquait forcément une librairie JavaScript : Swiper, Flickity, Slick… Résultat ? Des dizaines de kilo-octets de JS, des comportements parfois saccadés, et une accessibilité souvent négligée.
Mais depuis quelques années, une propriété CSS change la donne : scroll-snap-type. Avec un peu de flex, de overflow-x, et quelques règles bien senties, on peut créer une expérience fluide, performante et sans JS.
Alors, est-ce la fin des sliders JavaScript ? Pas complètement. Mais dans 80% des cas sur mobile, oui.
Ce que scroll-snap fait très bien
.slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1rem;
scroll-padding-inline: 1rem;
}
.slide {
flex: 0 0 80%;
scroll-snap-align: start;
border-radius: 0.75rem;
}✅ Scroll horizontal fluide sur mobile
✅ Alignement automatique à l’arrêt
✅ Performances maximales : aucun JS
✅ Accessibilité native (tactile + clavier)
C’est idéal pour :
- des galeries d’images simples,
- des témoignages ou logos à faire défiler,
- des timelines horizontales,
- des contenus à taille homogène.
Limites sur desktop : le retour du slider JS
Sur mobile, le défilement horizontal est naturel grâce au geste tactile. Mais sur desktop, ce comportement est souvent moins intuitif. Sans flèches ou pagination, l’utilisateur ne pense pas toujours à faire défiler :
❗ Le scroll horizontal à la molette est souvent ignoré
❗ Le clavier ne fonctionne pas toujours comme attendu
❗ L’absence de feedback visuel peut créer de la frustration
➡️ Résultat : sur desktop, il reste pertinent d’ajouter une navigation JS pour guider l’utilisateur (flèches, dots, etc.), ou d’enrichir l’UX avec un vrai slider.
Ce que scroll-snap ne sait pas faire (sans JS)
❌ Autoplay automatique
❌ Boutons précédent / suivant
❌ Pagination ou miniatures synchronisées
❌ Effets de transition complexes (fade, parallax, etc.)
❌ Boucle infinie (infinite loop)
Dès qu’il faut gérer l’état du slider, ajouter des animations complexes ou synchroniser plusieurs éléments, on retombe dans le monde du JavaScript. Et là, des librairies comme Swiper ou Splide gardent tout leur intérêt.
Quand un vrai slider reste pertinent ?
| Besoin | Pourquoi le JS reste utile ? |
|---|---|
| Autoplay / pause au focus | Scroll‑snap ne sait pas “faire défiler tout seul”. |
| Controls complexes (précédent, suivant, pagination, progress‑bar) | Nécessitent DOM & JS pour gérer l’état courant. |
| Effets 3D / parallax / fade | Scroll‑snap gère l’arrêt, pas la transition visuelle. |
| Synchronisation multi‑vues (miniatures, texte, vidéo) | Il faut recouper plusieurs éléments ➜ JS. |
| Loop infini | Scroll‑snap arrive en butée ; pour boucler il faut dupli‑diapos + JS. |
Meilleure pratique en 2025 : l’approche progressive
Commencez par un layout natif scroll-snap. Ajoutez du JS seulement si nécessaire.
💡 Le bon compromis : utiliser scroll-snap pour la base (performance, UX, accessibilité), et l’enrichir avec un petit script JS si besoin (ex : IntersectionObserver pour activer une slide active).
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.classList.toggle('is-visible', entry.isIntersecting);
});
}, { threshold: 0.5 });
document.querySelectorAll('.slide').forEach(el => observer.observe(el));Compatibilité navigateur
| Navigateur | Support scroll-snap |
|---|---|
| Chrome | ✅ depuis v69 |
| Firefox | ✅ depuis v68 |
| Safari | ✅ depuis v11 |
| Edge | ✅ depuis Chromium |
| iOS/Android | ✅ très bon support |
En 2025, scroll-snap est compatible avec plus de 96% du trafic. Aucun plugin requis.
Conclusion
Les sliders JS ne sont pas (encore) morts… mais leur utilisation systématique, elle, est bel et bien révolue.
Pour une expérience performante, accessible, fluide sur mobile, scroll-snap-type est votre meilleur allié. Moins de code, plus d’efficacité. Et si vraiment il vous faut du autoplay ou une pagination, rien n’empêche de venir enrichir ce socle CSS avec un soupçon de JavaScript.
Less slider, more snap.
