Customizable Image Comparison Plugin For Web – before-effect-slider.js

An easy to use yet fully customizable before/after image comparison plugin written in vanilla JavaScript.

The plugin creates a vertical or horizontal slider on two overlapping images and allows the user to compare the differences between those images via mouse drag.

How to use it:

1. Create an element that will serve as the container for the before/after image comparison slider.

<div id="beforeEffectslider"></div>

2. Download the plugin and insert the following files into the HTML file.

<link rel="stylesheet" href="./before-effect-slider.min.css" />
<script src="./before-effect-slider.min.js"></script>

3. Initialize the plugin and insert before/after images to the image comparison slider. That’s it.

beforeEffectslider({
  BeforeImage: "before.jpg",
  BeforeAlt: "Before image",
  AfterImage: "after.jpg",
  AftereAlt: "After image"
});

4. Change the slider direction to ‘Vertical’.

beforeEffectslider({
  BeforeImage: "before.jpg",
  BeforeAlt: "Before image",
  AfterImage: "after.jpg",
  AftereAlt: "After image",
  Vertical: false
});

5. Determine the selector of the image comparison slider. Useful for multiple instances on a page.

beforeEffectslider({
  Selector: "#definedID"
  BeforeImage: "before.jpg",
  BeforeAlt: "Before image",
  AfterImage: "after.jpg",
  AftereAlt: "After image"
});

6. Customize the appearance of the image comparison slider.

beforeEffectslider({
  // 50%
  DragFrom:50,
  //Max drag from right or bottom if vertical
  MaxDrag: 0,  
  // Min drag from left or top if vertical
  MinDrag: 30, 
  // Drag icon
  DragIcon: '↔',
  // Icon size in px
  IconSize: '24', 
  // Icon color
  IconColor:'#FFF', 
  // Line color
  LineColor:'#282828',
  // Background gradient
  ButtonGradient:['#282828','#000000'], 
  // Border color
  ButtonBorder:'#000000',
  // Border radius
  ButtonRaduis:50, // Line Button Raduis
  // Cursor style on hover
  Cursor:'ew-resize',
  // Shows before/after buttons
  Buttons:true,
  // Custom button text
  ButtonsText:{ 
    before:'Before',
    after:'After'
  },
  // Border properties
  Border:{ 
    width:5,
    style:'solid',
    color:'black'
   }
   
});

7. Callback functions.

beforeEffectslider({
  callbackBefore : () => alert('before build'),
  callbackAfter : () => alert('after build')
});