Carrousels avec CSS

Adam Argyle

Publié le : 20 mars 2025

À partir de Chrome 135, vous pouvez utiliser les fonctionnalités de la spécification CSS Overflow 5 conçues pour créer des expériences de défilement et de carrousel.

Cet article présente un aperçu des nombreuses expériences de défilement et de carrousel créées à l'aide de ces nouvelles fonctionnalités, et sans JavaScript. Regardez la vidéo suivante pour découvrir tout ce que vous pouvez désormais faire.

La vidéo montre une harmonie de boutons de défilement, de marqueurs de défilement, d'animations pilotées par le défilement, de requêtes scroll-state(), de :has(), de grille, d'ancrage et bien plus encore.

L'accessibilité est également très impressionnante.

Les bonnes pratiques concernant les carrousels sont gérées par le navigateur, grâce à la collaboration des équipes d'ingénierie et d'accessibilité. Il serait très difficile de créer un carrousel plus accessible que celui-ci.

Meet ::scroll-button() et ::scroll-marker()

Un carrousel est une zone de défilement avec un maximum de deux affordances d'UI ajoutées : des boutons et des marqueurs.

Dans la première version des fonctionnalités de carrousel CSS, les boutons et les repères sont créés à partir de CSS. Le navigateur place les éléments en tant que frères, avec les rôles appropriés, dans l'ordre de tabulation approprié, et conserve leur état. Cela facilite le développement d'un carrousel accessible.

• Boutons de défilement
  Éléments d'affordance de défilement interactifs, avec état et fournis par le navigateur <button>, qui facilitent l'accès au contenu et le défilement de 85 % d'une zone de défillement lorsqu'ils sont enfoncés.

• Marqueurs de défilement
  Éléments de navigation avec état <a> fournis par le navigateur, qui facilitent l'accès au contenu pour tout élément demandé dans la zone de défilement.

Le reste de cet article explique comment créer un carrousel à l'aide de ces nouvelles fonctionnalités.

Commencer avec un scroller

Vous pouvez ajouter des boutons et des repères à n'importe quelle zone de défilement de votre site.

Le code CSS suivant crée une zone de défilement de base à utiliser lors des étapes ultérieures pour ajouter des boutons et des repères. L'accrochage au défilement n'est pas obligatoire pour un carrousel, mais il est utilisé dans cet exemple. Les carrousels fonctionnent également pour les composants de défilement vertical et bidirectionnel.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Ajouter des boutons de défilement avec ::scroll-button()

Selon votre système d'exploitation, des boutons de défilement peuvent déjà être présents autour de vos barres de défilement. Les boutons de barre de défilement intégrés ont tendance à pousser une zone de défilement, tandis que les boutons de défilement CSS parcourent 85 % de la zone de défilement.

Pour les carrousels qui n'affichent qu'un seul élément en pleine largeur à la fois avec des points d'accroche de défilement, cela ressemblera à un montant par élément. Pour les longues listes d'éléments où plusieurs sont visibles à la fois, il fait défiler presque une page entière.

Pour ajouter des boutons de défilement avec CSS :

1. Ajoutez-les comme les autres pseudo-éléments, avec un sélecteur : .carousel::scroll-button(right) pour un bouton permettant de faire défiler le contenu vers la droite.
2. Spécifiez content avec un texte alternatif de remplacement accessible facultatif.

Le navigateur créera de vrais boutons, avec votre contenu à l'intérieur, en tant que frères du scroller. Vous pouvez maintenant disposer ces boutons, les styliser ou les anchor() selon vos besoins. Le CSS suivant crée deux boutons, l'un pour faire défiler vers la gauche et l'autre pour faire défiler vers la droite.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

Ajouter des repères de défilement avec ::scroll-marker()

Comme l'élément de pouce de la barre de défilement, les indicateurs de défilement CSS peuvent indiquer la taille du carrousel tout en permettant de se déplacer rapidement vers la fin ou le début. Un repère de défilement CSS est différent de la barre de défilement, car chaque repère est un lien qui peut représenter n'importe quel élément du défilement.

Pour illustrer cette distinction, prenons l'exemple des saisons d'une série télévisée. Au lieu de créer un repère pour chacun des 10 épisodes, créez-en deux qui renvoient au début du chapitre.

Notez que ces marqueurs ne sont pas des points. Ils utilisent la propriété content: "Season 1" de leur pseudo-élément. Les repères peuvent également être des miniatures, couramment utilisées pour les carrousels de galerie sur les sites Web de commerce électronique ou axés sur les photos.

Les repères sont semblables aux liens <a> sur une page, mais ils présentent quelques caractéristiques spécifiques :

1. Ils incluent un état :target-current lorsque le repère est visible ou ancré.
2. La navigation au clavier est incluse et se comporte comme un focusgroup.
3. L'expérience de lecteur d'écran est incluse et les rapports sont présentés sous forme de liste d'onglets.

Ajoutez des repères aux points d'intérêt importants de votre carrousel en procédant comme suit :

1. Définissez l'emplacement de scroll-marker-group sur before ou after.
2. Sélectionnez les points d'intérêt à l'aide du sélecteur .carousel .point-of-interest::scroll-marker.
3. Spécifiez content avec un texte alternatif de remplacement accessible facultatif : nombres, texte, vide ou image.

Le navigateur crée tous les repères et les place dans le conteneur du groupe de repères. Cet exemple crée un repère vide pour chaque <li>, afin de créer un point de repère pour chaque élément.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

L'élément conteneur des repères est appelé ::scroll-marker-group. Il est créé en tant que frère du scroller, tout comme les boutons de défilement. Ce conteneur peut être stylisé et placé où vous le souhaitez.

Marqueurs et boutons en même temps

En combinant les deux, l'expérience ressemble à un carrousel, mais présente les avantages suivants :

• Fonctionne avec JavaScript désactivé.
• Pas d'hydratation ni de dimensionnement différé (réduction de CLS).
• Prêt pour tous les types d'animations et de déclencheurs de défilement.
• L'accessibilité est incluse.
• Compatible avec les écrans tactiles, la souris et le clavier.

Faites-en moins, touchez plus de personnes, plus rapidement.

Ressources

Dans cet article, nous faisons principalement référence à ces fonctionnalités en tant que "carrousels", mais leurs capacités et leur utilité vont bien au-delà des cas d'utilisation des carrousels. Pour avoir une idée complète du potentiel de ces nouvelles fonctionnalités, essayez la galerie carrousel et d'autres composants tels que scrollspy, les onglets et les diapositives.

• Normes Web
  • CSS Overflow 5
  • Présentation du carrousel
  • Carrousel WAI Aria
• Chrome
  • Intention d'expédier
  • Galerie carrousel
  • Configurateur de carrousel

Configurateur de carrousel

Si vous préférez les supports visuels et interactifs, essayez le configurateur de carrousel.

Il propose des commutateurs, par exemple pour les boutons de défilement. Lorsqu'ils sont activés, les boutons du carrousel affiché apparaissent immédiatement, ainsi que le code CSS associé.

Il inclut également des exemples de concepts plus avancés qui sont adjacents au carrousel :

• interactivité
• scroll-state
• animation basée sur le défilement
• et les colonnes d'accrochage au défilement.

Galerie carrousel

Un espace de démonstration pour ceux qui souhaitent découvrir tout le potentiel de ces fonctionnalités et obtenir des réponses à des questions comme "peut-il faire X ?". Chaque démo est basée sur un cas d'utilisation trouvé sur Internet. Chaque démo montre comment orchestrer ces boutons et repères avec l'animation pilotée par le défilement, les requêtes scroll-state() et bien plus encore.

Pour l'anecdote, l'ensemble du site est sans JavaScript.

Les exemples vont de la simplicité à la robustesse et à la richesse des fonctionnalités. La navigation dans la galerie doit être inspirante et rassurante, et bien sûr, le code doit pouvoir être inspecté. Recherchez et inspectez @layer utilities pour trouver des utilitaires qui peuvent vous aider à créer des carrousels.

Autres tâches

Nous sommes fiers de la façon dont ces fonctionnalités s'intègrent à l'ensemble du code HTML et CSS. L'accessibilité d'un carrousel CSS est excellente. Les performances d'un carrousel CSS sont meilleures que celles de n'importe quelle solution JavaScript. L'expérience utilisateur d'un carrousel CSS est naturelle, fluide et riche. Toutefois, il existe des moyens de l'améliorer.

Utiliser vos propres éléments

Nous travaillons déjà à vous permettre d'ajouter vos propres composants pour les boutons de défilement et les repères. Cela signifie que vous pouvez fournir vos propres balises <a> contenant du contenu enrichi, comme des icônes. Vous pouvez également utiliser vos propres boutons multicouches créés avec Tailwind.

Défilement cyclique

De nombreux carrousels se bouclent sur eux-mêmes lorsqu'ils arrivent à la fin, comme un manège de fête foraine. Nous en sommes conscients et nous prévoyons de fournir une solution de plate-forme.

Nous espérons que vous apprécierez cette fonctionnalité. Nous sommes impatients de voir tous les utilisateurs Web qui ont désactivé JavaScript profiter d'une expérience de défilement agréable et de toutes les réductions de CLS qui découleront du meilleur timing du cycle de vie d'un carrousel intégré.

Moins de travail pour vous, une expérience utilisateur optimale et de meilleures performances