Card Carousel
Rangée de cartes qui avance d'une carte à la fois, aux flèches ou au doigt, et s'arrête net quand la dernière est entièrement visible.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0166-root contient un .ccr-slider : une fenêtre .ccr-viewport qui masque ce qui dépasse, une piste .ccr-track en flex avec 12 px d'écart, et deux flèches rondes en verre dépoli posées sur les bords. Chaque .ccr-card mesure 140 × 180 px par défaut et grossit de 5 % au survol ou quand un élément qu'elle contient a le focus.
Le pas n'est pas écrit en dur : à l'ouverture et à chaque changement de taille (ResizeObserver), le script mesure la largeur réelle d'une carte et l'écart de la piste, puis la distance maximale à parcourir pour que la dernière carte touche le bord droit. Une flèche ou un glisser de plus de 50 px décale la piste d'un pas (translateX, 0,4 s) ; arrivé au bout, la piste s'arrête au pixel près et la flèche correspondante passe à aria-disabled="true" (opacité 35 %). Pas de boucle.
Le carrousel occupe la largeur de son conteneur (640 px au plus par défaut) : plus il est large, plus il montre de cartes et moins il y a de pas. Une <img> posée dans une carte la couvre ; on peut aussi y mettre du texte, un prix, un bouton. Chaque .fx-0166-root de la page a sa propre instance.
Accessibilité
- Flèches nommées : vrais boutons « Cartes précédentes » / « Cartes suivantes », signalés
aria-disableden bout de rangée, avec contour:focus-visible. - Cartes hors champ : toute carte qui n'est pas entièrement visible devient
inert; un lien qu'elle contient ne peut pas recevoir le focus et faire sauter la rangée. - Rôles : région
aria-roledescription="carrousel"nommée, cartesrole="group"annoncées « carte, 3 sur 6 » (textes dans le HTML, à traduire). - Mouvement réduit : sous
prefers-reduced-motion: reduce, la rangée et l'agrandissement au survol changent sans transition. - Toucher : Pointer Events et
touch-action: pan-y: on balaie la rangée horizontalement sans empêcher le défilement vertical de la page.
Compatibilité navigateur
JavaScript sans dépendance : ResizeObserver (Chrome 64, Firefox 69, Safari 13.1), Pointer Events, inert (Chrome 102, Firefox 112, Safari 15.5 d'après MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux rangées dont la 2e pilotée seule, butée en fin de rangée, mouvement réduit, 390 px sans débordement, glisser au doigt (Chromium) sans bloquer le défilement vertical, 0 erreur.
Sans JavaScript, la rangée affiche les premières cartes et les flèches ne font rien. Avant Safari 15.5 / Firefox 112, inert est ignoré : la navigation marche, mais une carte hors champ peut recevoir le focus.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0166-root">
<div class="ccr-slider" role="region" aria-roledescription="carrousel" aria-label="…">
<div class="ccr-viewport">
<div class="ccr-track">
<div class="ccr-card" role="group" aria-roledescription="carte" aria-label="1 sur 6">…</div>
…
</div>
</div>
<button class="ccr-arrow ccr-prev" type="button" aria-label="…">…</button>
<button class="ccr-arrow ccr-next" type="button" aria-label="…">…</button>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Largeur maximale (CSS — --ccr-max-width) |
640px | La rangée prend la largeur de son conteneur jusqu'à cette limite. none pour toute la largeur. |
Taille des cartes (CSS — --ccr-card-w / --ccr-card-h) |
140px / 180px | Le pas de défilement suit automatiquement la largeur réelle des cartes. |
Écart entre cartes (CSS — --ccr-gap) |
12px | Ajouté au pas : une flèche décale toujours d'exactement une carte et un écart. |
Contenu des cartes (HTML — .ccr-card) |
6 dégradés « Card 1 » à « Card 6 » | Image (<img> qui couvre la carte), texte, prix, bouton. Mettez à jour les aria-label « X sur N » si vous en ajoutez. |
Agrandissement au survol (CSS — .ccr-card:hover) |
scale(1.05), 0,3 s | Supprimez la règle si vos cartes contiennent du texte qui doit rester fixe. |
Flèche inactive (CSS — .ccr-arrow[aria-disabled="true"]) |
opacité .35 | Apparence de la flèche en bout de rangée ; mettez display:none pour la cacher. |
FAQ
--ccr-card-w) et faites varier le contenu.
