Slider Comparación de Imágenes - Cómo Agregar el Código HTML

Que tal blogueros, en esta nueva entrada que les traigo la manera de como poner un slider para comparar imágenes(antes y después). Es un código muy sencillo de aplicar si queremos agregar la comparación de dos imágenes.

Les muestro la guía detallada para agrega este código HTML de comparación de imágenes en sus propios sitios.

El código HTMLse puede colocar dentro un sitio para poner la comparación de productos si vendes o de pronto lo agregas para observar diferencias de una imagen con la otra. También, para poner un antes y después de un trabajo realizado.

Cómo Instalar Código Antes y Después Comparación de Imágenes

Agregar Código CSS para Comparación HTML

Para darle estilo a nuestro código de verificar ambas imágenes antes y después, para ello agregamos antes del tag </head> nuestro estilo de hoja. Copiar el siguiente link:

<link href='https://dl.dropboxusercontent.com/s/etuma8df6awlf4r/slim-before-after.min.css' rel='stylesheet'/>

Poner Código JS para Funciones

Lo siguiente que debemos agregar es el código JavaScript (JS) antes del tag </body> con el objetivo de llamar la funciones de comparación de imágenes en HTML. Copia el siguiente JS.

<script src='https://dl.dropboxusercontent.com/s/oarqj5m8bgfsv53/slim-before-after.min.js'/>
  <script type='text/javascript'>
	var MyComparison = new slimBeforeAfter();

	//use refresh method for dynamicly created elements.
	//MyComparison.refresh();

	//use destroy method if you want to destroy plugin.
	//MyComparison.destroy();

</script>

Colocar DIV en cuerpo HTML

Aquí colocas el código HTML en la parte que va aparecer dentro de tu sitio. Luego, reemplaza las url de las imágenes que vas a poner. Copia el siguiente código div.

<div class="slim-comparison-container" data-slim-params="{&quot;position&quot;:&quot;horizontal&quot;,&quot;startPosition&quot;: 50}">
  <div class="slim-comparison-wrapper">
    <div class="slim-before-wrapper">
      <img src="https://img.freepik.com/foto-gratis/retrato-hombre-afroamericano-inteligente-profesional-pie-manos-cruzadas-sobre-pecho-pose-confianza_176420-33861.jpg" />
      <span class="slim-before-caption">Antes</span>
    </div>
    <div class="slim-after-wrapper">
      <img src="https://img.freepik.com/foto-gratis/hombre-barbudo-enojado-ropa-negocios-gritando-al-telefono-inteligente_171337-4982.jpg" />
      <a class="slim-after-caption" href="#">Despues</a>
    </div>
  </div>
</div>

Descargar Código HTML de Comparación de imágenes

Si quieres subir y modificar el código a tu conveniencia, entonces, puedes descargar el slider de comparación de imágenes.

https://dl.dropboxusercontent.com/s/l79d68xh9u7gw3v/slim-before-after.min.rar

DEMO

Antes

Despues