Créer des carrousels fluides en CSS pur

Pendant des années, créer des carrousels signifiait recourir à des bibliothèques JavaScript comme Swiper ou Glide. Chacune ajoutait des kilooctets à votre bundle, introduisait des dépendances et nécessitait une gestion minutieuse des écouteurs d’événements et de l’état. Mais le CSS moderne a discrètement évolué pour gérer les carrousels nativement—sans JavaScript requis.

Cet article explore comment construire des carrousels CSS performants et accessibles en utilisant scroll-snap, des pseudo-éléments expérimentaux et d’autres techniques CSS pures qui fonctionnent aujourd’hui et resteront pertinentes pour les années à venir.

Les fondations : Scroll Snap CSS

La pierre angulaire de tout carrousel CSS pur est la propriété scroll-snap. Elle transforme un conteneur défilable en une expérience paginée avec seulement quelques lignes :

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

Cela crée un carrousel horizontal où chaque élément s’aligne en place. Le mot-clé mandatory garantit que les utilisateurs atterrissent toujours sur une diapositive complète, tandis que scroll-behavior: smooth ajoute des transitions fluides entre les éléments.

Scroll Snap CSS fonctionne sur tous les navigateurs modernes, ce qui en fait la fondation la plus fiable pour les carrousels sans JavaScript. Pour les designs responsives, combinez-le avec CSS Grid ou ajustez le flex-basis pour afficher plusieurs éléments par vue :

.carousel-item {
  flex: 0 0 calc(33.333% - 1rem);
  margin: 0 0.5rem;
}

Navigation moderne : pseudo-éléments expérimentaux

Chrome 135+ introduit des pseudo-éléments expérimentaux qui génèrent automatiquement des contrôles de carrousel. Ces fonctionnalités nécessitent l’activation des fonctionnalités expérimentales de la plateforme web dans les flags Chrome.

Le pseudo-élément ::scroll-button crée des boutons précédent/suivant sans balisage supplémentaire :

.carousel::scroll-button(inline-start),
.carousel::scroll-button(inline-end) {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
  border: none;
}

.carousel::scroll-button(inline-start)::before {
  content: "←";
}

.carousel::scroll-button(inline-end)::before {
  content: "→";
}

De même, ::scroll-marker génère des points de pagination pour chaque section défilable :

.carousel {
  scroll-marker-group: after;
}

.carousel-item::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.carousel-item::scroll-marker:target-current {
  background: #333;
}

Notez que ces pseudo-éléments sont expérimentaux et leur syntaxe peut changer. La pseudo-classe :target-current met en évidence le marqueur actif lorsque les utilisateurs font défiler. Ces fonctionnalités réduisent les besoins en JavaScript tout en fournissant un support d’accessibilité natif.

Stratégie de repli pour la production

Étant donné que scroll-button et scroll-marker ont un support navigateur limité, utilisez la détection de fonctionnalités avec @supports :

/* Navigation de repli */
.carousel-nav {
  display: flex;
  gap: 0.5rem;
}

/* Masquer le repli lorsque les contrôles natifs sont supportés */
@supports (scroll-button-inline: both) {
  .carousel-nav {
    display: none;
  }
}

Pour une compatibilité plus large, combinez scroll-snap avec des liens d’ancrage pour la navigation :

<nav class="carousel-nav">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</nav>

<div class="carousel">
  <div id="slide1" class="carousel-item">...</div>
  <div id="slide2" class="carousel-item">...</div>
  <div id="slide3" class="carousel-item">...</div>
</div>

Carrousel CSS avec lecture automatique sans JavaScript

Créer un carrousel CSS avec lecture automatique ne nécessite que des animations keyframe :

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.autoplay-carousel {
  display: flex;
  animation: slide 12s infinite;
}

.autoplay-carousel:hover {
  animation-play-state: paused;
}

Cette technique fonctionne de manière fiable mais échange le contrôle utilisateur contre la simplicité. La mise en pause au survol améliore l’utilisabilité, et la combiner avec prefers-reduced-motion respecte les préférences d’accessibilité :

@media (prefers-reduced-motion: reduce) {
  .autoplay-carousel {
    animation: none;
  }
}

Accessibilité et performances

Les carrousels CSS purs excellent en termes de performances—pas d’analyse JavaScript, pas d’écouteurs d’événements, pas de perturbation de mise en page. Le défilement natif du navigateur gère automatiquement les entrées tactiles, clavier et souris.

Pour l’accessibilité, assurez-vous que :

• Scroll-snap fournit un défilement fluide, mais la navigation clavier complète et les contrôles accessibles nécessitent les nouvelles fonctionnalités ::scroll-button et ::scroll-marker.
• Les indicateurs de focus restent visibles
• Le contenu reste accessible lorsque le CSS échoue
• Les zones tactiles respectent la taille minimale de 44×44px

Ajoutez des labels ARIA pour améliorer l’expérience des lecteurs d’écran :

<div class="carousel" role="region" aria-label="Galerie de produits">
  <div class="carousel-item" aria-label="Diapositive 1 sur 3">...</div>
</div>

Conclusion

Le CSS moderne a éliminé le besoin de bibliothèques JavaScript de carrousel dans la plupart des cas. Scroll-snap fournit les fondations aujourd’hui, tandis que les fonctionnalités émergentes comme scroll-button et scroll-marker préfigurent un avenir où les composants d’interface complexes ne nécessitent aucun JavaScript. Ces techniques réduisent la taille des bundles, améliorent les performances et simplifient la maintenance—des avantages qui se cumulent au fil du temps.

Commencez avec scroll-snap pour les sites en production. Expérimentez avec les nouveaux pseudo-éléments dans Chrome. Plus important encore, demandez-vous si vous avez besoin de cette bibliothèque de carrousel de 50 Ko quand 20 lignes de CSS obtiennent le même résultat.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..