https://github.com/eugabrielsilva/image-compare
Image comparison plugin (before/after) in pure JS
https://github.com/eugabrielsilva/image-compare
before-after image-comparison javascript-plugin
Last synced: 7 months ago
JSON representation
Image comparison plugin (before/after) in pure JS
- Host: GitHub
- URL: https://github.com/eugabrielsilva/image-compare
- Owner: eugabrielsilva
- Created: 2023-03-28T14:50:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-25T12:58:32.000Z (over 2 years ago)
- Last Synced: 2025-06-12T06:07:33.533Z (7 months ago)
- Topics: before-after, image-comparison, javascript-plugin
- Language: JavaScript
- Homepage:
- Size: 81.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# image-compare
A very simple image comparison plugin (before/after) in pure JS.
### Demo
https://codepen.io/eugabrielsilva/pen/PodgoQB
### Usage
Include the CSS in your `` tag.
```html
```
Include the JS script before your `` closing tag.
```html
```
Add the `.image-compare` class to a container with the before/after images.
**Do not put anything else inside the container or it will break the plugin.**
```html
```
### Customization
In order to change the "Before" and "After" labels, use the `data-before-label` and `data-after-label` attributes in the container.
```html
```
If you want to modify the style, override one of the available CSS classes:
- `.image-compare` - The main plugin container.
- `.image-compare-label` - "Before" and "After" labels.
- `.image-compare-image` - Each image.
- `.image-compare-handle` - The interactive handle. The arrows are inside a pseudo `::before` element in this class.
### Credits
Developed by [Gabriel Silva](https://eugabrielsilva.tk).