Gallery to Slideshow
Grille CSS de vignettes basculant vers un slideshow à fenêtre glissante — transitions cubiques, navigation flèches + dots, toggle instantané.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La bascule galerie/slideshow est entièrement pilotée par CSS : setGalleryMode() ajoute .hidden sur .gallery-grid-mode et .active sur .gallery-slideshow-mode, ce qui commute opacity et pointer-events en 400 ms — aucune animation JS, juste des transitions CSS déclarées.
Le slideshow maintient une fenêtre glissante à 3 créneaux : .slideshow-slide.prev (translateX(-120%) scale(0.8)), .slideshow-slide.current (translateX(0) scale(1)), .slideshow-slide.next (translateX(120%) scale(0.8)). À chaque navigation, updateSlideshow() réassigne les backgrounds et les classes aux 3 créneaux en calcul de modulo sur slideshowColors — la transition .6s cubic-bezier(.4,0,.2,1) déclarée sur les slides fait le reste.
La grille est un CSS Grid repeat(3, 1fr) sur deux rangées avec un gap de 4 px. Les vignettes sont des <div> avec fond inline ; remplacez-les par des balises <img> ou <picture> pour de vraies photos — la structure CSS et les transitions restent identiques.
Accessibilité
- Aucun bloc
prefers-reduced-motionn'est présent dans le CSS ni dans le JS — les transitions s'exécutent même si l'utilisateur a demandé à réduire le mouvement. À compenser en production en ajoutant@media (prefers-reduced-motion: reduce) { .slideshow-slide { transition: none } }. - Les boutons fléchés portent
aria-label="Slide précédente"/aria-label="Slide suivante"— accessibles au clavier et aux lecteurs d'écran. - Les points de navigation sont des
<button>natifs avecaria-label="Aller à la slide N"— focusables via Tab, activables via Entrée ou Espace. - Les boutons Gallery / Slideshow sont des
<button>natifs dans le flux de tabulation normal, sans attributrolesupplémentaire nécessaire. - Aucun
roleniaria-labelglobal n'est posé sur le conteneur du composant — à ajouter en production pour identifier le widget aux technologies d'assistance.
Compatibilité navigateur
Nécessite CSS Grid, CSS transitions et CSS transforms — disponibles dans tous les navigateurs modernes depuis 2017. Zéro dépendance externe.
Sans support des transitions CSS, la bascule galerie/slideshow est instantanée mais fonctionnelle. Sans JS, les boutons toggle sont inopérants et la grille s'affiche en mode galerie fixe.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="morph-toggle-group">
<button class="morph-toggle active" onclick="setGalleryMode(this,'gallery')">Gallery</button>
<button class="morph-toggle" onclick="setGalleryMode(this,'slideshow')">Slideshow</button>
</div>
<div class="gallery-slideshow-wrapper" id="galleryDemo">
<div class="gallery-grid-mode" id="galleryGrid">
<div class="gallery-thumb" style="background:…"></div>
<!-- ×6 vignettes -->
</div>
<div class="gallery-slideshow-mode" id="slideshowMode">
<div class="slideshow-slide prev"></div>
<div class="slideshow-slide current"></div>
<div class="slideshow-slide next"></div>
<button class="slideshow-arrow left" aria-label="Précédente">‹</button>
<button class="slideshow-arrow right" aria-label="Suivante">›</button>
<div class="slideshow-nav"><!-- N× .slideshow-dot --></div>
</div>
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| `slideshowColors` (JS global) | 6 dégradés CSS | Tableau des backgrounds de chaque slide — remplacez les valeurs par des url('photo.jpg') pour de vraies images. |
| `.gallery-slideshow-wrapper` height | 150px | Hauteur totale du composant. Mettez 100vh pour un slideshow plein écran, ou alignez sur la hauteur de votre colonne de contenu. |
| `.slideshow-slide` transition | .6s cubic-bezier(.4,0,.2,1) | Durée et courbe de l'animation de glissement. .35s ease pour plus de réactivité, 1s pour une transition cinématique. |
| `.gallery-grid-mode` grid-template-columns | repeat(3, 1fr) | Nombre de colonnes de la grille. repeat(2, 1fr) pour 4 images sur 2 rangées, repeat(4, 1fr) pour 8 images sur 2 rangées. |
| `--primary` (`:root`) | #6366f1 | Couleur d'accent du toggle actif (boutons Gallery / Slideshow). Remplacez par votre couleur brand. |
| `.slideshow-slide` border-radius | 10px | Arrondi des slides en plein cadre. 0 pour des slides bord à bord dans la visionneuse. |
| `.gallery-thumb` border-radius | 4px | Arrondi des vignettes dans la grille. 0 pour des vignettes carrées strictes. |
FAQ
document.getElementById('galleryGrid').classList.add('hidden'); document.getElementById('slideshowMode').classList.add('active'); updateSlideshow(); — aucune interaction utilisateur n'est requise. Assurez-vous que slideshowColors et slideshowIndex sont définis avant d'appeler updateSlideshow()..gallery-thumb, remplacez style="background:…" par une balise <img style="width:100%;height:100%;object-fit:cover">, et renseignez slideshowColors avec des valeurs url('photo.jpg') center/cover no-repeat. Le reste du JS et du CSS est inchangé..gallery-thumb dans #galleryGrid et des .slideshow-dot supplémentaires dans .slideshow-nav. Complétez slideshowColors avec autant d'entrées que de slides — updateSlideshow() calcule les indices prev/current/next en modulo sur la longueur du tableau, aucune autre modification n'est nécessaire.
