Aller au contenu
Forge

Comparateur avant/après à curseur

Deux photos superposées et une poignée à faire glisser pour montrer vos chantiers, coupes ou jardins avant et après.

  • Tailwind
  • React
  • CSS
  • WordPress
Ouvrir dans un nouvel onglet

Description

Le curseur est un vrai champ de type range : flèches, Origine et Fin au clavier, annonce « Avant 60 %, après 40 % » aux lecteurs d'écran, glisser à la souris ou au doigt sur toute la photo. Trois réalisations se choisissent par boutons à bascule. Sans JavaScript, les photos restent coupées au milieu ; avec prefers-reduced-motion, la poignée se déplace sans animation. Les dégradés se remplacent par vos photos en gardant le texte alternatif.

Code

Chargement du code…

Contenu de l'archive

galerie-avant-apres-curseur-html-tailwind.zip3 fichiers · 6 Ko

  • index.html14 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Mots-clés

Mis à jour le 16 octobre 2026.

Dans le même esprit

  • Galerie de réalisations avec visionneuse

    Gratuit

    Le portfolio d'un artisan : une grille de chantiers filtrée par type de travaux, avec lieu, année et durée, et une visionneuse plein écran avec légendes et navigation au clavier.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Galerie filtrable

    Gratuit

    Une grille de photos filtrée par thème, avec des boutons à bascule et l'annonce du nombre de photos affichées.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Carrousel d'images

    Gratuit

    Un carrousel de photos avec précédent, suivant, puces et bouton pause, qui ne défile jamais tout seul si l'utilisateur limite les animations.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant

  • Page de remerciement après envoi

    Gratuit

    La page qui suit un devis ou un message de contact : confirmation claire, délai de réponse annoncé, récapitulatif imprimable, prochaines étapes et liens utiles.

    • Tailwind
    • React
    • CSS
    • WordPress
    Composant