Thumbnail Slider
Grande vue et rangée de miniatures-boutons : un clic, Entrée ou un glisser sur l'image fait glisser la vue, et la miniature active s'encadre de blanc.
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
Dans .fx-0165-root, le bloc .tsl-slider empile une fenêtre .tsl-viewport (format 2/1 par défaut, coins arrondis) et une rangée .tsl-thumbs. La fenêtre contient une piste .tsl-track où chaque .tsl-slide occupe toute la largeur ; afficher la diapositive n revient à décaler la piste de translateX(-n × 100 %) en 0,5 s.
Chaque miniature est un vrai <button> : la n-ième miniature affiche la n-ième diapositive (l'ordre fait le lien, aucun index à écrire). La miniature active porte aria-current="true", ce qui lui donne l'opacité pleine et le cadre blanc ; les autres restent à 50 %. Sur la grande vue, un glisser horizontal de plus de 50 px au doigt ou à la souris passe à la suivante ou à la précédente, en boucle, et la miniature suit.
Les images de l'acheteur se posent directement : une <img> dans une diapositive ou une miniature la couvre entièrement (object-fit: cover). Sans image, les cinq dégradés de la démo s'affichent. Le script prend chaque .fx-0165-root de la page séparément : plusieurs galeries cohabitent sans se gêner.
Accessibilité
- Miniatures atteignables : boutons natifs, donc Tab, Entrée et Espace fonctionnent ; chacune porte un nom (« Afficher la diapositive 2 ») et la miniature en cours est signalée par
aria-current. Contour:focus-visibleblanc. - Rôles de carrousel : région
aria-roledescription="carrousel"nommée ; diapositivesrole="group"annoncées « 2 sur 5 ». La piste est enaria-live="polite": la diapositive choisie est lue. - Diapositives cachées :
inert, donc un lien ou un bouton placé dans une image non affichée ne prend pas le focus. - Mouvement réduit : sous
prefers-reduced-motion: reduce, la vue change sans glissement ; rien d'autre ne bouge seul. - Toucher : Pointer Events et
touch-action: pan-ysur la grande vue : un geste horizontal change de photo, un geste vertical fait défiler la page.
Compatibilité navigateur
JavaScript sans dépendance (Pointer Events, aria-current comme crochet de style), aspect-ratio (Chrome 88, Firefox 89, Safari 15) et inert (Chrome 102, Firefox 112, Safari 15.5 d'après MDN). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : deux galeries dont la 2e pilotée seule, miniatures au clavier, mouvement réduit, 390 px sans débordement, glisser au doigt (Chromium) sans bloquer le défilement vertical, 0 erreur.
Sans JavaScript, la première image et les miniatures s'affichent mais les miniatures ne font rien. Sans aspect-ratio (navigateurs de 2020), la grande vue n'a pas de hauteur : donnez-lui une hauteur fixe.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0165-root">
<div class="tsl-slider" role="region" aria-roledescription="carrousel" aria-label="…">
<div class="tsl-viewport">
<div class="tsl-track" aria-live="polite">
<div class="tsl-slide" role="group" aria-roledescription="diapositive" aria-label="1 sur 5"><img src="…" alt="…"></div>
…
</div>
</div>
<div class="tsl-thumbs">
<button class="tsl-thumb" type="button" aria-label="…" aria-current="true"><img src="…" alt=""></button>
<button class="tsl-thumb" type="button" aria-label="…"><img src="…" alt=""></button>
…
</div>
</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 — --tsl-max-width) |
640px | La galerie prend la largeur de son conteneur jusqu'à cette limite ; none pour toute la largeur. |
Proportions de la grande vue (CSS — --tsl-ratio) |
2 / 1 | Rapport largeur/hauteur de la fenêtre. Les images sont recadrées pour la remplir. |
Taille des miniatures (CSS — --tsl-thumb-w / --tsl-thumb-h) |
50px / 32px | Largeur et hauteur de chaque bouton-miniature. La rangée passe à la ligne si elle manque de place. |
Images (HTML — <img> dans .tsl-slide et .tsl-thumb) |
aucune : 5 dégradés « Slide 1 » à « Slide 5 » | Une image par diapositive et sa version réduite dans la miniature de même rang. Gardez autant de miniatures que de diapositives. |
Nom des miniatures (HTML — aria-label de .tsl-thumb) |
« Afficher la diapositive 1 »… | Texte lu par les lecteurs d'écran ; mettez-y ce que montre l'image (« Couverture Arche »). |
Miniature active (CSS — .tsl-thumb[aria-current="true"]) |
opacité 1, cadre #fff de 2 px | Changez la couleur du cadre ou l'opacité des miniatures inactives (0,5 par défaut). |
FAQ
.tsl-thumbs affiche la 3e .tsl-slide. Pour réordonner, déplacez la diapositive et sa miniature ensemble.<video>. Les diapositives cachées sont inert mais une vidéo qui joue continue de jouer : mettez-la en pause vous-même si vous changez de diapositive pendant la lecture.
