before-after

beforeAfter

before-after is a lightweight Javascript library to compare images in before/after view. The new version of the library does not use any dependencies.

Installation

NPM

NPM is the recommended installation method. Install before-after in your project with the following command:

npm install before-after --save-dev

yarn add before-after --dev

Warning before-after@3 is ESM.

Note Minimum supported Node.js version is 22.

Installation

The library is available as the before-after package name on npm and Github.

npm install before-after --save

yarn add before-after --dev

How it works

HTML

<div class="beforeafter">
  <img src="img/before.jpg" />
  <img src="img/after.jpg" />
</div>

Note The last image will be on the top

Initialization

Import before-after JavaScript library as an ES6 modules.

import BeforeAfter from 'before-after';

The before-after constructor accepts the following parameters:

Arguments	Type	Default	Description
element	HTMLElement	null	HTMLElement to target the library
config	Object	{}	Configuration (optional)

Initialize the library with a CSS selector string.

new BeforeAfter(document.querySelector('.beforeafter'));

Configuration

Options

cursor

Type:

type cursor = boolean;

Default: true

Tells the library to enable the cursor following mouse or finger.

new BeforeAfter(document.querySelector('.beforeafter'), {
  cursor: false
});

orientation

Type:

type orientation = 'horizontal' | 'vertical';

Default: 'horizontal'

Tells the library which orientation used.

new BeforeAfter(document.querySelector('.beforeafter'), {
  orientation: 'vertical'
});

start

Type:

type start = number;

Default: 50

Tells the library the start position.

new BeforeAfter(document.querySelector('.beforeafter'), {
  start: 30
});

Methods

destroy

Tells the library to destroy the instance.

beforeAfter.destroy();

License

before-after is licensed under the MIT License.

Created with ♥ by @yoriiis.