Before After Image Viewer In jQuery - beforeAfter.js

beforeAfter.js is a responsive jQuery image comparison slider for comparing two images with mouse drag, touch swipe, or click-to-move controls.

It requires two overlapping images and includes configurable divider styling, movement callbacks, and API methods for reading, changing, or destroying an initialized slider.

For a dependency-free option, see Before-After Image Comparison Slider: Lightweight Web Component.

Features

• Mouse drag and touch swipe image comparison.
• Optional click-to-move behavior.
• Configurable starting position and separator opacity.
• Custom separator, handle, and arrow colors.
• onMoveStart, onMoving, and onMoveEnd callbacks.
• Public get, set, and destroy methods.
• Multiple sliders on a page.

How To Use It

1. Load jQuery, then load the minified beforeAfter.js plugin.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="/path/to/dist/beforeafter.jquery.min.js"></script>

2. Add two images to the comparison container.

<div class="beforeAfter">
  <img src="before.jpg" alt="Before" />
  <img src="after.jpg" alt="After" />
</div>

3. Initialize the image comparison slider.

$(function() {
  $('.beforeAfter').beforeAfter();
});

4. Pass an options object to change the starting position, interaction behavior, separator styling, or callbacks.

$('.beforeAfter').beforeAfter({
  movable: true,
  clickMove: true,
  position: 50,
  opacity: 0.7,
  activeOpacity: 1,
  hoverOpacity: 0.9,
  separatorColor: '#ffffff',
  bulletColor: '#ffffff',
  arrowColor: '#333333',
  onMoveStart: function() {},
  onMoving: function() {},
  onMoveEnd: function() {}
});

All Plugin Options

Option	Description
movable Default: true	Enables mouse drag and touch swipe movement.
clickMove Default: true	Moves the divider when the comparison area is clicked.
position Default: 50	Initial divider position as a percentage from 0 to 100.
opacity Default: 0.7	Separator opacity when idle.
activeOpacity Default: 1	Separator opacity while dragging.
hoverOpacity Default: 0.9	Separator opacity while the comparison area is hovered.
separatorColor Default: #ffffff	Color of the vertical separator line.
bulletColor Default: #ffffff	Background color of the circular drag handle.
arrowColor Default: #333333	Color of the arrows inside the drag handle.

Callbacks

Callback	Runs When
onMoveStart	Dragging starts.
onMoving	The divider moves during dragging.
onMoveEnd	Dragging ends.

API Methods

Method	Description
get(key)	Returns the stored value of an option from the first matched slider.
set(key, value)	Changes a stored option. Position, opacity, separator color, handle color, and arrow color update immediately.
destroy()	Removes generated slider elements and plugin events, then restores the original images.

var currentOpacity = $('.beforeAfter').beforeAfter('get', 'opacity');

$('.beforeAfter').beforeAfter('set', 'position', 25);
$('.beforeAfter').beforeAfter('set', 'separatorColor', '#ff0000');

$('.beforeAfter').beforeAfter('destroy');

Multiple Image Comparison Sliders

Use the same class on each two-image container and initialize them with one selector.

<div class="beforeAfter">
  <img src="before-1.jpg" alt="Before" />
  <img src="after-1.jpg" alt="After" />
</div>

<div class="beforeAfter">
  <img src="before-2.jpg" alt="Before" />
  <img src="after-2.jpg" alt="After" />
</div>

$('.beforeAfter').beforeAfter();

Changelog:

v2.0.0 (2025-08-29)

• Added callback functions.

Related Resources

• 10 Best Image Comparison Tools In JavaScript
• Before-After Image Comparison Slider: Lightweight Web Component

---

This awesome jQuery plugin is developed by mamedul. For more Advanced Usages, please check the demo page or visit the official website.