Author: | aminejafur |
---|---|
Views Total: | 939 views |
Official Page: | Go to website |
Last Update: | August 5, 2020 |
License: | MIT |
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') });