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

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

Preview:

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

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

You Might Be Interested In:


Leave a Reply