Generador de slider antes/después
Cree un control deslizante interactivo para comparar dos imágenes (antes/después) directamente en su navegador, previsualícelo en vivo y copie el código HTML/CSS para integrarlo en su propio sitio.
Cómo funciona
La imagen «después» se muestra a tamaño completo en el fondo, mientras que la imagen «antes» se superpone en un contenedor cuyo ancho controla un deslizador invisible: al arrastrarlo, va revelando progresivamente la imagen de debajo. La vista previa de arriba funciona directamente en la herramienta, y el código generado reproduce el mismo principio en HTML/CSS puro, sin dependencias externas de JavaScript.
¿Cómo integro el código generado en mi sitio?
Copie el código HTML generado y sustituya los dos atributos src por las rutas reales de sus imágenes (alojadas en su servidor) o por sus versiones completas codificadas en base64; el control nativo input[type=range] incluido en el código gestiona la interactividad sin ninguna biblioteca adicional.
¿Puedo cambiar las etiquetas «antes» y «después»?
Sí, los campos de etiqueta permiten personalizar el texto que se muestra en cada esquina del slider (por ejemplo «Antes de la obra» / «Después de la obra», o fechas), tanto en la vista previa como en el código generado.
La vista previa y la generación del código se realizan íntegramente en su navegador: sus imágenes nunca se envían a un servidor.