Slider avant / après pour site

Slider avant / après pour site: à quoi ça sert

Pour les services qui changent l’apparence de quelque chose, comme un barbier, l’esthétique automobile, une rénovation ou un nettoyage, montrer l’avant et l’après sur la même photo convainc plus que n’importe quel texte.

Collez les deux photos et le générateur crée le comparateur avec un séparateur que l’on fait glisser au doigt ou à la souris, des étiquettes, une position initiale et une couleur. En dessous, le séparateur est un input range : il fonctionne avec les flèches du clavier et est annoncé par le lecteur d’écran ; le découpage utilise clip-path, sans bibliothèque.

Mode d’emploi

1. Collez les adresses des photos avant et après.
2. Écrivez les étiquettes, la description et la position initiale.
3. Copiez le code et collez-le dans la page.

Quand l’utiliser

• Barbier et salon de coiffure.
• Esthétique automobile et carrosserie.
• Rénovation, peinture et nettoyage.

Questions fréquentes

À quelles activités cela sert-il ?

À tout service qui change l’apparence de quelque chose : barbier, salon de coiffure, esthétique automobile, rénovation, peinture, nettoyage de tissus d’ameublement, dentisterie esthétique, paysagisme. Voir la différence sur la même photo convainc plus que deux photos séparées.

Comment est-ce accessible ?

Le séparateur est un vrai input range en dessous : on peut le déplacer avec les flèches du clavier, et le lecteur d’écran annonce le pourcentage. Les deux photos ont un texte alternatif.

Les photos doivent-elles être identiques ?

Elles doivent avoir les mêmes proportions et, de préférence, le même cadrage, prises au même endroit. Si les proportions diffèrent, la photo du dessus est recadrée pour s’adapter (object-fit: cover).

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires