Top 5: Mejor slider comparadores antes y después (comparación de imágenes) para jQuery y JavaScript

Top 5: Mejor slider comparadores antes y después (comparación de imágenes) para jQuery y JavaScript

Todo sale por los ojos, sea cual sea el tema (específicamente hablando de imágenes) la mejor (bonita, bonita) impresión de algo, será siempre la elección de un usuario. La capacidad de permitir al usuario ver una comparación entre 2 imágenes y controlarla por sí mismo puede ser una experiencia fascinante para el usuario y ventajosa para usted. En particular, no estamos hablando solo de líneas de tiempo (antes y después), sino de la comparación entre su producto y otros (independientemente de si son similares o no).

Como siempre se menciona en nuestros Tops, no construyas la rueda como ya existe, eso cuesta dinero, tiempo y salud mental (sí, podría ser difícil de lograr si estás comenzando desde cero). En esta parte superior, hemos recopilado 7 de las comparaciones más importantes entre complementos de imágenes para Javascript y jQuery, por lo que no perderá mucho tiempo buscando complementos y comenzará a trabajar de inmediato en su proyecto. Disfrútala !

5. Cocoen

Inicio | Github

Cocoen es un plugin jQuery de control deslizante antes / después habilitado para tacto con requestAnimationFrame. Este complemento se basa en Before-after.js

Cocoen antes después del control deslizante

4. imgSlider

Demo | Github

Un complemento de jquery simple para crear controles deslizantes de comparación de imágenes.

comparación imgslider

3. Yuxtaponer

Inicio | Github

Juxtapose es una biblioteca de JavaScript para hacer un control deslizante de imagen antes / después. JuxtaposeJS ayuda a los narradores a comparar dos piezas de medios similares, incluidas fotos y GIF. Es ideal para resaltar historias de entonces / ahora que explican cambios lentos a lo largo del tiempo (crecimiento del horizonte de una ciudad, rebrote de un bosque, etc.) o historias de antes / después que muestran el impacto de eventos dramáticos individuales (desastres naturales, protestas, guerras, etc.). Es gratis, fácil de usar y funciona en todos los dispositivos. Todo lo que necesita para comenzar son enlaces a las imágenes que le gustaría comparar.

Comparación del control deslizante de yuxtaposición

Puedes usarlo en modo horizontal o incluso en vertical.

2. Antes-después.js

Demo | Github

Before-after.js es un control deslizante de comparación de imágenes simple y receptivo. Aunque la idea de un control deslizante de antes y después no es nada nuevo y aunque hay implementaciones de CSS puro, eso es increíble. Before-after.js es muy simple y probablemente se adaptará a todas sus necesidades.

Antes-después.js antes y después del control deslizante

1. Veinte veinte

Inicio | Github

Los desarrolladores suelen colocar dos imágenes una al lado de la otra con la esperanza de que el usuario vea claramente y exactamente qué cambió. Pero hay una mejor manera de resaltar las diferencias entre dos imágenes, una manera que enfocaría todo.

Ese es el objetivo de Twenty Twenty, este complemento de jQuery es una herramienta de diferencia visual, que facilita la detección de diferencias entre 2 imágenes para el usuario a través de un elemento deslizante.

Control deslizante de comparación de imágenes Twenty Twenty

Menciones honoríficas

Beerslider

Github

Beerslider

Beerslider es un control deslizante de antes y después al que se puede acceder con JavaScript vainilla. Su propósito básico es comparar dos versiones de una imagen, por ejemplo el mismo objeto capturado en dos momentos diferentes, una foto preeditada y su versión procesada, un boceto y la ilustración terminada, etc. Puede ser particularmente útil con ajustes preestablecidos de fotos (Ajustes preestablecidos de Lightroom, acciones de Photoshop, etc.). Beer Slider es accesible desde el teclado: puede acceder a él y revelar / ocultar la imagen del estado "después" con el teclado.

Si conoce otro complemento increíble para comparar imágenes (antes y después), compártalo con la comunidad en el cuadro de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable