How to make use of it:

1. Load the minified model of the beforeafter.js plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/beforeafter.min.js"></script>

2. Add photos to the earlier than after viewer.

<div class="beforeAfter">
  <img src="before.jpg" />
  <img src="after.jpg" />
</div>

3. Call the function to create a default earlier than after the image viewer.

$(function(){
  $('.beforeAfter').beforeAfter();
});

4. Customize the picture comparison slider.

$('.beforeAfter').beforeAfter({

  // is draggable/swipeable
  movable: true,

  // click image to move the slider
  clickMove: true,

  // always show the slider
  alwaysShow: true,

  // intial position of the slider
  position: 50,

  // opacity between 0 and 1
  opacity: 0.4,
  activeOpacity: 1,
  hoverOpacity: 0.8,

  // slider colors
  separatorColor: '#ffffff',
  bulletColor: '#ffffff',
  arrowColor: '#333333',
  
});

Before After Image Viewer, jquery-beforeafter-slider Plugin/Github, image comparison slider codepen, before after slider html css, image comparison slider app

See Demo And Download