Author: | yoriiis |
---|---|
Views Total: | 880 views |
Official Page: | Go to website |
Last Update: | July 9, 2023 |
License: | MIT |
Preview:

Description:
Yet another JavaScript before/after image comparison library that works both on desktop and mobile.
The before-after.js automatically generates a horizontal or vertical slider that you can view the before/after images by dragging or swiping.
How to use it:
Install the before-after.js.
# NPM $ npm install before-after --save
Import the before-after.js as a module.
import BeforeAfter from 'before-after';
Add before/after images to the page and specify which image is displayed on the upper layer using the beforeafter-itemActive
class.
<div class="example"> <div class="beforeafter-item beforeafter-itemActive"> <img src="before.jpg" /> </div> <div class="beforeafter-item"> <img src="after.jpg" /> </div> </div>
Initialize the image comparison slider.
const beforeAfterItem = new BeforeAfter({ element: document.querySelector('.example') });
Create the image comparison slider.
beforeAfterItem.create();
The necessary CSS styles for the image comparison slider.
.beforeafter{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; margin: 0; padding: 0; pointer-events: auto; -ms-touch-action: none; } .beforeafter .beforeafter-item{ position: absolute; width: 100%; height: 100%; overflow: hidden; } .beforeafter img{ width: 100%; height: 100%; }
Execute a function after creation.
beforeAfterItem.create(() => { // do something });
Make the slider always follows the cursor/finger. Default: true.
const beforeAfterItem = new BeforeAfter({ element: document.querySelector('.example'), cursor: false });
Set the direction of the image comparison slider. Possible values:
- ltr: default
- rtl: horizontal
- ttb: top to bottom
- btt: bottom to top
const beforeAfterItem = new BeforeAfter({ element: document.querySelector('.example'), direction: 'ltr' });
Default selectors.
const beforeAfterItem = new BeforeAfter({ element: document.querySelector('.example'), selectors: { item: '.beforeafter-item', itemActive: '.beforeafter-itemActive', cursor: '.beforeafter-cursor', imageWrapper: '.beforeafter-wrapperImage' } });
Move the slider to a specific point.
beforeAfterItem.goTo(percentage);
Reset the position of the slider.
beforeAfterItem.reset();
Destroy the instance.
beforeAfterItem.destroy();
Changelog:
v3.0.0 (07/09/2023)
- This package is now pure ESM.
v2.0.4 (12/20/2019)
- JS Updated