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

Preview:

Description:

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')
});