Slider de antes y después para sitio web
Pega las direcciones de las dos fotos (del mismo tamaño y encuadre). Arrastra el divisor en la vista previa y copia el código.
Cómo usarAntes y después con divisor arrastrable
Disponible en: 
Slider de antes y después para sitio web: para qué sirve
Para servicios que cambian la apariencia de algo, como barbería, estética automotriz, remodelación o limpieza, mostrar el antes y el después en la misma foto convence más que cualquier texto.
Pega las dos fotos y el generador arma el comparador con el divisor que se arrastra con el dedo o el mouse, etiquetas, posición inicial y color. Por debajo, el divisor es un input range, así que funciona con las flechas del teclado y lo anuncia el lector de pantalla; el recorte se hace con clip-path, sin bibliotecas.
Cómo usar
- Pega las direcciones de las fotos del antes y del después.
- Escribe las etiquetas, la descripción y la posición inicial.
- Copia el código y pégalo en la página.
Cuándo usar
- Barbería y salón de belleza.
- Estética automotriz y hojalatería.
- Remodelaciones, pintura y limpieza.
Preguntas frecuentes
¿Para qué negocios sirve?
Para cualquier servicio que cambia la apariencia de algo: barbería, salón de belleza, estética automotriz, remodelación, pintura, limpieza de tapicería, odontología estética, paisajismo. Ver la diferencia en la misma foto convence más que dos fotos sueltas.
¿Cómo queda de accesible?
El divisor es un input range de verdad por debajo: se puede mover con las flechas del teclado y el lector de pantalla anuncia el porcentaje. Las dos fotos tienen texto alternativo.
¿Las fotos tienen que ser iguales?
Deben tener la misma proporción y, de preferencia, el mismo encuadre, tomadas desde el mismo lugar. Si las proporciones son diferentes, la foto de arriba se recorta para encajar (object-fit: cover).
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.