Générateur de slider avant/après
Créez un curseur interactif de comparaison entre deux images (avant/après) directement dans votre navigateur, prévisualisez-le en direct, puis récupérez le code HTML/CSS pour l'intégrer à votre propre site.
Comment ça marche
L'image « après » est affichée en pleine taille en arrière-plan, tandis que l'image « avant » est superposée par-dessus dans un conteneur dont la largeur est contrôlée par un curseur invisible : en glissant ce curseur, vous révélez progressivement l'image du dessous. L'aperçu ci-dessus fonctionne directement dans l'outil, et le code généré reproduit le même principe en HTML/CSS pur, sans dépendance JavaScript externe.
Comment intégrer le code généré sur mon site ?
Copiez le code HTML généré et remplacez les deux attributs src par les chemins réels de vos images (hébergées sur votre serveur) ou par leurs versions encodées en base64 complètes ; le curseur natif input[type=range] intégré au code gère l'interactivité sans bibliothèque supplémentaire.
Puis-je changer les libellés « avant » et « après » ?
Oui, les champs de libellé permettent de personnaliser le texte affiché sur chaque coin du slider (par exemple « Avant travaux » / « Après travaux », ou des dates), aussi bien dans l'aperçu que dans le code généré.
L'aperçu et la génération du code se font entièrement dans votre navigateur : vos images ne sont jamais envoyées à un serveur.