Con este vídeo de la Zona Código aprendes a crear un slider de comparación de imágenes antes y después en WordPress sin plugins, usando el bloque HTML con sus pestañas de HTML, CSS y JavaScript.
Es uno de los elementos visuales más efectivos para mostrar transformaciones: un diseño antes y después de un rediseño, una foto antes y después de un retoque, una habitación antes y después de una reforma. El usuario arrastra un divisor central para revelar una imagen u otra, y el efecto es inmediato y muy visual.
Todo va autocontenido en un solo bloque HTML, no depende de jQuery ni de ninguna librería externa, y puedes usarlo tantas veces como quieras en la misma página simplemente duplicando el bloque.
Vídeo: cómo crear un slider antes y después en WordPress
Este contenido es para miembros
Incluye acceso a todos los cursos, vídeos de la Zona Código, recursos, al soporte y a la comunidad privada. Inicia sesión si eres miembro.
Código para el slider de comparación
Este contenido es para miembros
Incluye acceso a todos los cursos, vídeos de la Zona Código, recursos, al soporte y a la comunidad privada. Inicia sesión si eres miembro.
Vídeos relacionados:
- Cómo editar css en WordPress
- Cómo editar css en un tema de bloques
- Cómo editar js en WordPress
- El bloque HTML de WordPress 7.0: HTML, CSS y JavaScript en un solo lugar
- Botón de copiar al portapapeles en WordPress sin plugins
- Crear contador fuera del bloque de HTML
- Cuenta atrás hasta una fecha en WordPress con el bloque HTML