Deslizador de comparación de imágenes compatible con dispositivos móviles mínimos-Slider-antes-después
| Autor: | piecioshka |
|---|---|
| Views Total: | 458 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 5, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un plugin/componente deslizante de comparación de imagen que crea un deslizador vertical para revelar antes de & después de las imágenes en el arrastre del ratón y toque deslizar.
Básico en la entrada del deslizador de rango.
Funcionamiento
Descargar & instalar.
# NPM $ npm install slider-before-after --save
Importe los archivos JavaScript y CSS necesarios en el documento.
<link rel="stylesheet" href="/src/styles/main.css"> <link rel="stylesheet" href="/src/styles/custom-range-input.css"> <script src="/src/scripts/slider-before-after.js"></script>
Agregue un control deslizante de rango al antes & después de las imágenes. Hecho.
<div class="slider-before-after"> <div class="slider-before-image"> <img src="before.jpg" alt=""/> </div> <div class="slider-after-image"> <img src="after.jpg" alt=""/> </div> <input type="range" class="slider-track"/> </div>
