Chaque plugin de carrousel que vous avez supprimé est livré avec un gestionnaire de roue, un polyfill par balayage et des opinions sur l'élan. Le navigateur possède déjà tout cela ; le CSS n'a qu'à dire où repose le scroller, ce qui est une très bonne utilisation de la plateforme.

.gallery {
  display: grid;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.gallery > * { scroll-snap-align: center; }

Choisissez l'alignement

  1. start enclenche chaque carte contre le bord avant de la galerie, le bon choix pour des largeurs de cartes uniformes et une progression de lecture visible.
  2. Le centre fait de la carte de repos l'ancre visuelle et gère les cartes plus larges que la fenêtre d'affichage avec plus de grâce.
  3. obligatoire impose une position de repos après chaque geste, idéal pour les platines fixes ; la proximité en offre simplement une, plus respectueuse des contenus de largeur mixte.

Ce que le navigateur vous offre

L'élan, le balayage tactile et l'inertie du trackpad proviennent de overflow-x lui-même. Les utilisateurs du clavier atteignent chaque carte avec un onglet et le défilement se déplace pour garder le focus visible. le remplissage de défilement sur le conteneur réserve de l'espace au point d'accrochage, de sorte qu'un en-tête collant n'avale jamais les pixels supérieurs d'une carte au repos.

Deux paramètres apportent le vernis : scroll-snap-stop : empêche toujours un coup rapide de passer de trois produits à la page quatre, et un bloc à mouvement réduit préféré peut détendre un jeu obligatoire à proximité. Un petit carrousel, entièrement assemblé à partir de déclarations que vous pouvez lire à haute voix à un designer.