Author: | kylewetton |
---|---|
Views Total: | 1,226 views |
Official Page: | Go to website |
Last Update: | June 28, 2022 |
License: | MIT |
Preview:

Description:
A modern, lightweight, mobile-compatible image comparison slider written in vanilla JavaScript.
Users are able to compare two images by clicking/tapping the before/after images or by dragging & swiping the slider.
Features:
- Responsive design.
- Touch-friendly.
- Fluid mode to create a full-size image comparison viewer.
- Supports both horizontal and vertical directions.
- Smooth sliding.
- Allows you to specify the starting point on init.
How to use it:
1. Install & download the library.
# NPM $ npm install image-compare-viewer --save
2. Wrap your before/after images into a container element.
<div id="example"> <img src="before.jpg" alt="BEFORE" /> <img src="after.jpg" alt="AFTER" /> </div>
3. Load the image-compare-viewer’s files in the HTML.
<link href="dist/image-compare-viewer.min.css" rel="stylesheet" /> <script src="dist/image-compare-viewer.min.js"></script>
4. Initialize the image comparison slider. That’s it.
const element = document.getElementById("example"); const myViewer = new ImageCompare(element).mount();
5. Create a vertical image comparison slider.
const myViewer = new ImageCompare(element,{ verticalMode: false }) .mount();
6. Enable the Fluid mode to create a full-size image comparison slider.
const myViewer = new ImageCompare(element,{ fluidMode: true }) .mount();
7. Determine the starting point. Default: 50 (50%).
const myViewer = new ImageCompare(element,{ startingPoint: 75 }) .mount();
8. Determine whether to allow the user to compare before/after images with mouse hover. Default: false.
const myViewer = new ImageCompare(element,{ hoverStart: true }) .mount();
9. Enable/disable the smooth sliding effect after dragging the slider. Default: true.
const myViewer = new ImageCompare(element,{ smoothing: true, smoothingAmount: 100 }) .mount();
10. Customize the appearance of the slider.
const myViewer = new ImageCompare(element,{ controlColor: "#FFFFFF", controlShadow: true, addCircle: false, addCircleBlur: true }) .mount();
Changelog:
v1.5.0 (06/28/2022)
- Add video support
v1.5.0 (09/19/2021)
- Bugfix/reserve scroll gap
v1.4.1 (07/27/2021)
- Bugfix/reserve scroll gap
v1.4.0 (05/09/2020)
- mobile events connected to controller only
v1.3.5 (05/09/2020)
- User select on body and persistance fix
v1.3 (05/02/2020)
- Bugs fixed