Swipe Gallery
Visionneuse en piste de diapositives que l'on tire au doigt ou à la souris : la photo suit le geste, puis se cale sur la suivante au-delà de 50 px.
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 première ouverture, le script construit une diapositive .slb-slide par vignette (avec l'image de data-full, sinon celle de la vignette, et le même alt) et les aligne dans .slb-track. Les images en grand ne sont donc chargées que si quelqu'un ouvre la galerie. Le compteur « 2 / 4 » est calculé d'après le nombre de vignettes.
Le glisser utilise les Pointer Events, avec capture du pointeur : doigt, stylet et souris se comportent pareil, et la souris peut sortir de la zone sans annuler le geste. Pendant le geste, la piste suit le pointeur sans délai ; au relâchement, plus de 50 px vers la gauche passent à la diapositive suivante, plus de 50 px vers la droite reviennent en arrière, sinon la piste revient en place avec un petit rebond (0,4 s). Pas de boucle : on s'arrête à la première et à la dernière.
Une diapositive fait 600 px de large au plus, 80 % de la fenêtre ou ce qu'autorise 70 % de sa hauteur au format 3:2 ; la photo y est affichée entière (object-fit: contain). Sous la piste, l'indication « Glissez pour naviguer » balance sa flèche trois fois puis s'arrête.
Accessibilité
- Clavier : vignettes en
<button>; dans la visionneuse, ← et → changent de diapositive, Échap ferme. Il n'y a pas de boutons fléchés à l'écran : à la souris, on tire la piste. - Lecteurs d'écran : seule la diapositive affichée est lisible (les autres portent
aria-hidden="true") ; le compteur « 2 / 4 » est une régionaria-live="polite". - Dialog modal : nom « Visionneuse d'images », focus sur ✕ à l'ouverture, page derrière inerte, focus rendu à la vignette à la fermeture.
- Mouvement réduit : pas de zoom à l'ouverture, pas de glissement animé entre diapositives, flèche de l'indication immobile. Le geste reste actif : la piste suit toujours le doigt.
- Geste vertical :
touch-action: pan-ylaisse la page défiler verticalement ; un geste vertical annule le glisser et la piste revient en place.
Compatibilité navigateur
Pointer Events et setPointerCapture : Chrome 55, Firefox 59, Safari 13 ; ResizeObserver recale la piste quand la fenêtre change (Chrome 64, Firefox 69, Safari 13.1). Le reste suit le socle des visionneuses (<dialog> modal : Firefox 98, Safari 15.4). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : glisser à la souris qui sort de la zone, flèches sans boucle, balayage tactile à 390 px dans Chromium.
Sans ResizeObserver, la position est recalculée à chaque ouverture mais pas pendant un redimensionnement. Sans showModal(), la galerie reste une rangée de photos.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0178-root">
<div class="slb-grid">
<button type="button" class="slb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé rose vers violet" width="600" height="400"></button>
<button type="button" class="slb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé ambre vers rouge" width="600" height="400"></button>
<button type="button" class="slb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé fuchsia vers rose" width="600" height="400"></button>
<button type="button" class="slb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Dégradé violet vers cyan" width="600" height="400"></button>
</div>
<dialog class="slb-viewer" aria-label="Visionneuse d'images">
<div class="slb-content">
<p class="slb-counter" aria-live="polite"><span class="slb-current">1</span> / <span class="slb-total">4</span></p>
<button type="button" class="slb-close" aria-label="Fermer"><svg>…</svg></button>
<div class="slb-viewport">
<div class="slb-track"></div>
</div>
<p class="slb-hint"><span>Glissez pour naviguer</span><svg>…</svg></p>
</div>
</dialog>
</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 |
|---|---|---|
Seuil de changement (JS — dx < -50 / dx > 50) |
50 px | Distance à tirer pour passer à la diapositive voisine. |
Largeur des diapositives (CSS — .slb-viewport) |
min(600px, 80vw, calc((100vh - 140px) * 1.5)) |
Le calcul en vh garde, au format 3:2, la place du compteur et de ✕ au-dessus de l'image et de l'indication au-dessous, même dans une fenêtre basse ; les diapositives prennent toujours 100 % de cette largeur. |
Format des diapositives (CSS — aspect-ratio de .slb-slide) |
3 / 2 | À accorder à vos photos ; changez aussi le 1.5 du calcul de largeur en conséquence. |
Écart et rebond (CSS — .slb-track) |
20 px, 0,4 s cubic-bezier(0.175, 0.885, 0.32, 1.275) |
L'écart est relu par le script, rien d'autre à changer. |
Texte d'aide (HTML — .slb-hint) |
« Glissez pour naviguer » | Modifiable ou supprimable ; la flèche balance trois fois (animation: slb-hint 1.5s … 3). |
Vignettes et voile (CSS — --slb-thumb, --slb-backdrop) |
120px, rgba(0, 0, 0, 0.9) |
Largeur des boutons de la page et fond de la visionneuse. |
Grande photo (HTML — data-full) |
absent | Image placée dans la diapositive ; chargée à la première ouverture seulement. |
FAQ
show() la ligne Math.max(0, Math.min(slides.length - 1, i)) par (i + slides.length) % slides.length ; le glisser fonctionnera alors en boucle aussi.touch-action: pan-y). Un geste vertical laisse la page défiler et la piste reprend sa place.
