Touch-friendly Image Comparison Slider In Vanilla JS – before-after.js

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