Deslizador de comparación de imagen adaptable mínimo con vanilla JavaScript-antes-después
| Autor: | ArekPastuszka |
|---|---|
| Views Total: | 1,861 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 7, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Este es un plugin de JavaScript vainilla para generar un deslizador responsive, amigable para el móvil antes/después de comparar la diferencia entre dos imágenes.
Funcionamiento
Importa la hoja de estilo ' Before-after. min. css ' y JavaScript ' Before-after. min. js ' en el archivo HTML.
<link rel="stylesheet" href="dist/css/before-after.min.css"> <script src="dist/js/before-after.min.js"></script>
Inserte imágenes antes y después en un elemento contenedor.
<div id="example"> <img src="img/before.jpg" alt="Before" /> <img src="img/after.jpg" alt="After" /> </div>
Inicialice el plugin antes de después y listo.
document.addEventListener('DOMContentLoaded', function () {
var beforeAfterExample = new BeforeAfter(document.querySelector('#example'));
}); Registro de cambios
09/07/2018
- agregado soporte móvil
