Comparar múltiples imágenes con deslizadores-dics

Vista prévia

Descripción

Dics (el deslizador de comparación de imágenes definitivas) es una librería de comparación de imágenes de JavaScript que le permite comparar múltiples imagenes con deslizadores verticales u horizontales.

Totalmente responsivo y amigable con el tacto. Arrastre & Mantenga los reguladores para ver las diferencias entre las imágenes. También admite filtros de imagen y leyendas de texto.

Funcionamiento

Importe los archivos JavaScript y CSS de la biblioteca dics en el documento HTML.

<link rel="stylesheet" href="/dics.original.css">
<script src="/dics.original.js"></script>

Inserte varias imágenes en un contenedor.

<div class="b-dics">

<img src="1.jpg" alt="Image 1">

<img src="2.jpg" alt="Image 2">

<img src="3.jpg" alt="Image 3">

<img src="4.png" alt="Image 4">


...
</div>

Aplique deslizadores de comparación de imagen a las imágenes.

new Dics({


container: document.querySelectorAll('.b-dics')
});

En su lugar, muestre el texto del subtítulo.

new Dics({


container: document.querySelectorAll('.b-dics'),


hideTexts: true
});

Personalice la posición de la leyenda de la imagen. Valores posibles: ' centro ' , ' superior ' , ' derecha ' , ' abajo ' , ' izquierda ' .

new Dics({


container: document.querySelectorAll('.b-dics'),


textPosition: 'center'
});

Establezca la orientación del control deslizante en horizontal.

new Dics({


container: document.querySelectorAll('.b-dics'),


linesOrientation: 'horizontal'
});

Gire el contenedor de imágenes.

new Dics({


container: document.querySelectorAll('.b-dics'),


rotate: '45deg'
});

Personaliza el texto & colores de fondo:

new Dics({


container: document.querySelectorAll('.b-dics'),


// ['#000000', '#FFFFFF']


arrayBackgroundColorText: null,


arrayColorText: null
});

Aplique filtros CSS a las imágenes.

new Dics({


container: document.querySelectorAll('.b-dics'),


filters: null
});

Personaliza el color del deslizador.

new Dics({


container: document.querySelectorAll('.b-dics'),


linesColor: null
});