Genera un bloque slider antes/después de imagen
Los sliders antes/después son bloques donde la interacción misma es el contenido. Arrastras un handle entre dos imágenes superpuestas y ves la transformación. Fotógrafos, diseñadores y reformas los usan mucho.
La mayoría usan librería JS de 10KB+ y no abordan accesibilidad (drag por teclado, reduced motion, labels screen reader).
¿Por qué generarlo en vez de instalar un plugin existente?
Plugins como Image Compare Before and After funcionan pero cargan jQuery UI para el drag. Son ~40KB de librería para un slider. En móvil se siente laggy porque los eventos no son passive.
Un bloque generado usa pointer events nativos, CSS clip-path para el split y queda bajo 2KB JS. Accesible por teclado: flechas mueven 5% cada una; Home/End a bordes. Cada imagen con alt que nombra el estado ("antes"/"después") para lectores.
Respeto reduced-motion: usuarios con esa preferencia ven layout lado a lado estático. Tu contenido sigue accesible para todos.
Prompt de ejemplo
Este es el tipo de descripción que genera este plugin. Puedes partir de aquí y ajustar lo que necesites antes de generar.
Nombre del plugin: Acme Before After
Bloque acme/before-after:
- image_before (id + url + alt)
- image_after (id + url + alt)
- label_before, label_after (opc)
- default_position (0-100, def 50)
Render: dos <img> absolutos con el "after" clip-path por CSS var --split.
Handle central draggable (línea vertical con grip circular).
Interacción:
- Pointer events actualizan --split.
- Flechas mueven 5%.
- Home/End a 0/100.
- aria-valuenow refleja %.
Reduced motion: dos imágenes lado a lado sin drag.
Aspect ratio bloqueado al before; after escalado.Qué suele incluir el plugin generado
- Bloque con before/after + labels opcionales
- CSS clip-path driven por CSS var
- Drag con pointer events (sin lib)
- Teclado: flechas, Home/End
- Fallback reduced-motion estático
- Aspect ratio bloqueado al before
Split default, labels y constraints son atributos. Para galerías de varias comparaciones, un bloque padre contiene varios.
Preguntas frecuentes
¿Y si las imágenes son de tamaños distintos?
Usa la before como referencia y escala la after con object-fit: cover. Para comparación fiel, mismas dimensiones.
¿Rendimiento móvil?
60fps en Android medio porque usamos pointer events passive y solo actualizamos transform. Sin layout thrashing.