Comparar imágenes de dos capas con un deslizador-limpiar deslizador
| Autor: | Recidvst |
|---|---|
| Views Total: | 1,248 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 25, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
El deslizador Scrub es una librería JavaScript pura que crea un deslizador interactivo, configurable, adaptable, vertical a compara dos imágenes (después/antes) superpuestas una encima de la otra.
Funcionamiento
Incluya la versión minimizada del deslizador de arrastre en la Página Web.
<link href="dist/Scrub.min.css" rel="stylesheet"> <script src="dist/Scrub.min.js"></script>
Cree dos elementos DIV para mantener las imágenes antes/después y, a continuación, insértelos en el contenedor de arrastre del deslizador como estos:
<div class="example" id="demo"> <div style="before-class"></div> <div style="after-class"></div> </div>
Cree un nuevo objeto Scrub y especifique la ruta de acceso a las imágenes antes/después.
Scrub({
target: '#element',
src: ['before.jpg','after.jpg']
}); Añadir texto alternativo personalizado a las imágenes de antes/después.
Scrub({
target: '#element',
src: ['before.jpg','after.jpg'],
alt: ['Image 1','Image 2']
}); Decida si desea mostrar u ocultar el manejador circular.
Scrub({
target: '#element',
handle: false, // default true
src: ['before.jpg','after.jpg']
}); Establezca la altura del control deslizante de comparación de imágenes.
Scrub({
target: '#element',
height: 300,
src: ['before.jpg','after.jpg']
});
