BeforeAfter

Customizable image comparison library

• BeforeAfter
  • Installation
    • Package manager
    • CDN
  • Basic usage
  • Parameters
  • Customize
    • Style
    • Custom Slider element
  • Examples

Installation

Package manager

// using npm
npm install @corentints/before-after

// using yarn
yarn add @corentints/before-after

// using pnpm
pnpm install @corentints/before-after

CDN

<script src="https://cdn.jsdelivr.net/npm/@corentints/before-after@latest/dist/before-after.umd.min.js"></script>

Basic usage

Set up the HTML:

Just put two images in a div. The first image will automatically be on the left and the second on the right.

<div id="before-after">
  <img src="./assets/before.png" alt="Squirtle" />
  <img src="./assets/after.png" alt="Squirtle with sunglasses" />
</div>

// not necessary if you are not using package manager
import BeforeAfter from '@corentints/before-after'

const beforeAfterElement = new BeforeAfter({
  rootElement: document.querySelector("#before-after")
});

Parameters

| Parameter | Description | Type | Default value | Required | | ----------------------- | --------------------------------------------------- | -------------: | -------------------: | -------: | | rootElement | The root element | HTMLDivElement | / | yes | | allowSlide | Allow user to drag and slide the slider | boolean | true | no | | allowClick | Allow user to click in the image to move the slider | boolean | true | no | | clickTransition | Enable transition animation on click | boolean | true | no | | clickTransitionDuration | Set the click transition duration in ms | number | 500 | no | | defaultSliderPosition | The slider position in percent | number | 50 | no | | topRightText | Top right text | string | / | no | | bottomRightText | Bottom right text | string | / | no | | topLeftText | Top left text | string | / | no | | bottomLeftText | Bottom left text | string | / | no | | textClassName | Custom CSS classname for text | string | 'before-after__text' | no |

Here is an example with all parameters:

const beforeAfterElement = new BeforeAfter({
  rootElement: document.querySelector("#before-after"),
  allowSlide: false,
  allowClick: true,
  clickTransitionDuration: 1000,
  defaultSliderPosition: 45,
  topLeftText: "Top left text",
  topRightText: "Top right text",
  bottomLeftText: "Bottom left text",
  bottomRightText: "Bottom right text",
  textClassName: "my-custom-class"
});

Customize

Style

You can customize the slider by overriding the existing CSS.

You can find the CSS file here.

Custom Slider element

You can insert your own HTML element to create a custom slider. Add the attribute data-ba-element="slider" to it and the library will use it automatically.

You don't need to manage the height nor the position of it: the library will apply a style automatically to do so.

Example:

<div id="before-after">
  <div data-ba-element="slider" class="my-custom-slider">
    <p>My customer slider text</p>
  </div>
  <img src="./assets/before.png" alt="Squirtle" />
  <img src="./assets/after.png" alt="Squirtle with sunglasses" />
</div>

Examples

Find different examples here: https://corentints.github.io/before-after/