Fade Slider
Diaporama en fondu : l'image affichée s'efface pendant que la suivante apparaît au même endroit, sans aucun déplacement. Flèches, clavier et doigt.
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
Ici rien ne glisse : les diapositives .fdsl-slide sont empilées les unes sur les autres (position: absolute; inset: 0) dans .fdsl-track. Une seule porte la classe is-active ; elle passe à l'opacité 1 tandis que les autres retombent à 0, avec une transition de 0,6 s. Pendant ce temps, les deux images se mélangent, ce qui convient aux vues prises au même cadrage.
Le script déplace is-active d'une diapositive à l'autre. Il réagit au clic sur .fdsl-prev et .fdsl-next, aux touches ← et → quand le focus est dans le diaporama, et à un glisser horizontal de plus de 50 px (Pointer Events, doigt ou souris). Après la dernière image vient la première, et inversement. Le diaporama reste immobile tant que personne n'agit.
Pour démarrer ailleurs que sur la première image, mettez is-active sur une autre diapositive dans le HTML : le script la reprend au chargement. Vos photos se posent en <img> dans la diapositive (recadrage object-fit: cover) ; une légende .fdsl-caption facultative s'affiche au centre. Le cadre prend la largeur disponible jusqu'à 640 px, au format 16/10.
Plusieurs diaporamas sur une page fonctionnent chacun de leur côté : le script s'attache à chaque .fdsl-carousel, ne crée rien sur window et ignore un bloc déjà préparé (data-fdsl-ready) s'il est exécuté une seconde fois.
Accessibilité
- Structure annoncée :
role="region",aria-roledescription="carrousel"et unaria-labelsur le cadre ; chaque image devient un groupe « diapositive » nommé « 3 sur 5 ». - Images invisibles neutralisées : les diapositives à l'opacité 0 portent
inert,aria-hiddenetpointer-events: none; un lien sur une photo masquée ne peut être ni cliqué ni atteint au clavier. - Lecteurs d'écran : chaque changement est dit une fois par une zone
aria-live="polite"invisible (« diapositive 2 sur 5 »). - Commandes : boutons natifs aux libellés « Diapositive précédente » et « Diapositive suivante », anneau de focus blanc, touches ← et →.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, l'image change d'un coup, sans fondu ; la navigation reste entière.
Compatibilité navigateur
Moins de 4 Ko de JavaScript, sans bibliothèque. Mesures du 08/11/2026 (Playwright : Chromium, Firefox, WebKit) : deux diaporamas côte à côte qui ne se répondent pas, code collé deux fois sans double branchement, Tab puis Entrée, flèches du clavier, glisser au doigt à 390 px dans Chromium et à la souris ailleurs, mouvement réduit, zéro erreur. Planchers issus de @mdn/browser-compat-data 8.1.8, fixés par l'attribut inert.
Sans inert (navigateurs plus anciens), le fondu marche, mais le contenu d'une image masquée peut encore recevoir le focus. Safari 14 n'a pas aspect-ratio : fixez la hauteur avec --fdsl-height. JavaScript coupé : seule la diapositive is-active du HTML est visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0162-root">
<div class="fdsl-carousel" role="region" aria-roledescription="carrousel" aria-label="Diaporama" data-slide="diapositive" data-of="sur">
<div class="fdsl-track">
<div class="fdsl-slide is-active"><span class="fdsl-caption">Slide 1</span></div>
<div class="fdsl-slide"><span class="fdsl-caption">Slide 2</span></div>
<!-- … une div.fdsl-slide par image (img facultative) -->
</div>
<button type="button" class="fdsl-arrow fdsl-prev" aria-label="Diapositive précédente"><svg>…</svg></button>
<button type="button" class="fdsl-arrow fdsl-next" aria-label="Diapositive suivante"><svg>…</svg></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 |
|---|---|---|
Durée du fondu (CSS — --fdsl-duration sur .fx-0162-root) |
0.6s | 1s ou plus donne un fondu enchaîné de diaporama ; 0.3s un changement vif. |
Largeur et format (CSS — --fdsl-width, --fdsl-ratio) |
640px · 16 / 10 | Largeur maximale du cadre et rapport largeur/hauteur. 1 / 1 pour des visuels carrés. |
Hauteur imposée (CSS — --fdsl-height) |
auto | Une hauteur fixe (160px) ou 100% du parent remplace le calcul par le format. |
Image de départ (HTML — classe is-active) |
première diapositive | Placez is-active sur la diapositive à montrer au chargement. |
Fond des flèches et arrondi (CSS — --fdsl-arrow-bg, --fdsl-radius) |
blanc à 20 % · 1rem | Sur des images claires, un fond sombre (rgba(0,0,0,.4)) garde les chevrons lisibles. |
Zone d'exposition (CSS — --fdsl-stage-bg, --fdsl-stage-padding, --fdsl-stage-min-height) |
#0a0a0f · 25px 16px · 300px | Fond sombre et marge de la démonstration ; mettez transparent, 0, 0 dans une vraie page. |
Annonce vocale (HTML — data-slide, data-of, aria-label) |
diapositive · sur · Diaporama | Mots utilisés pour « diapositive 2 sur 5 » et nom du diaporama ; traduisez-les pour une page en anglais. |
FAQ
#12121a) transparaît un peu. Donnez au cadre .fdsl-carousel un fond proche de vos images, ou réduisez la durée avec --fdsl-duration.object-fit: cover pour remplir le cadre. Le fondu est simplement plus beau entre des photos de même cadrage (un lieu à plusieurs heures, un produit sous plusieurs couleurs), car rien d'autre ne bouge que ce qui change.pointer-events: none et inert, donc un bouton posé sur une image masquée ne peut pas être déclenché par erreur à travers celle du dessus.
