jquery-beforeafter-slider

v2.0.0

Published

4 months ago

A responsive, touch-enabled, and highly customizable jQuery plugin to compare two images with a slider.

0High
0Medium
0Low

jquery-plugin before-after image-comparison image-slider responsive-slider touch-slider jquery mamedul mamedul islam momedul momedul islam image-viewer comparison slider

jQuery Before & After Viewer

A responsive, touch-enabled, and highly customizable jQuery plugin to compare two images with a slider. Perfect for showcasing before and after transformations, photo retouching, or any visual comparison.

Live Demo

✨ Features

Fully Responsive: Adapts to any container size.
Touch & Mobile Friendly: Works smoothly on iOS, Android, and other mobile devices.
Highly Customizable: Easily change colors, positions, and opacities.
Callback Functions: Execute your own code on slider events (onMoveStart, onMoving, onMoveEnd).
Public API Methods: Control the plugin programmatically with get, set, and destroy methods.
Lightweight & Easy to Use: Simple setup with minimal dependencies (just jQuery).
CSS Class-based Styling: All styles are injected into the <head>, keeping your HTML clean.

🚀 Installation & Usage

Getting started is simple. Just follow these steps:

1. Include Files

First, make sure you have jQuery included in your project. Then, include the plugin's JavaScript file.

<!-- 1. Include jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 2. Include the Before After Viewer plugin -->
<script src="path/to/jquery.before-after.js"></script>

2. HTML Structure

Create a container div with exactly two img tags inside it. The first image will be the "before" image, and the second will be the "after" image.

<div id="my-viewer">
    <img src="path/to/before-image.jpg" alt="Before">
    <img src="path/to/after-image.jpg" alt="After">
</div>

3. Initialize the Plugin

Call the .beforeAfter() function on your container element.

$(document).ready(function() {
    $('#my-viewer').beforeAfter();
});

⚙️ Configuration Options

You can customize the plugin by passing an options object during initialization.

$('#my-viewer').beforeAfter({
    position: 75,
    separatorColor: '#ff0000',
    arrowColor: '#ffffff'
});

Here is a list of all available options:

| Option | Type | Default | Description | | ---------------- | ---------- | ---------------| ----------------------------------------------------------- | | movable | boolean | true | If false, the slider cannot be moved. | | clickMove | boolean | true | Allows moving the slider by clicking on the images. | | position | number | 50 | The initial position of the slider in percentage (0-100). | | opacity | number | 0.7 | The default opacity of the separator (0-1). | | activeOpacity | number | 1 | The opacity of the separator when being dragged. | | hoverOpacity | number | 0.9 | The opacity of the separator on hover. | | separatorColor | string | '#ffffff' | The color of the separator line (CSS color value). | | bulletColor | string | '#ffffff' | The background color of the circular handle. | | arrowColor | string | '#333333' | The color of the arrows inside the handle. | | onMoveStart | function | function(){} | Callback function executed when the user starts dragging. | | onMoving | function | function(){} | Callback function executed continuously while dragging. | | onMoveEnd | function | function(){} | Callback function executed when the user stops dragging. |

🛠️ Public Methods (API)

You can interact with an initialized slider using public methods.

Get a Value

Retrieve the current value of any setting.

// Initialize the plugin and store the instance
var mySlider = $('#my-viewer').beforeAfter();

// Get the current opacity
var currentOpacity = mySlider.beforeAfter('get', 'opacity');
console.log(currentOpacity); // Outputs: 0.7

Set a Value

Programmatically change a setting after initialization.

// Set the position to 25%
mySlider.beforeAfter('set', 'position', 25);

// Change the separator color to blue
mySlider.beforeAfter('set', 'separatorColor', 'blue');

Destroy the Plugin

Revert the container back to its original state (the two images). This is useful for single-page applications or dynamic content.

mySlider.beforeAfter('destroy');

🌐 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
iOS & Android browsers

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

👨‍💻 Author & Hire Me

This plugin was created and is maintained by Mamedul Islam.

I am a passionate web developer with experience in creating interactive and user-friendly web components. I am currently available for freelance projects or full-time opportunities.

I help businesses grow their online presence with custom web solutions. Specializing in WordPress, WooCommerce, and Shopify, I build modern, responsive, and high-performance websites.

WhatsApp: message me
Portfolio: mamedul.github.io
GitHub: @mamedul
LinkedIn: Connect with me!
Twitter (X): @mamedul

⭐ Show Your Support

If you find this extension useful, please consider giving it a star on GitHub! Your support helps motivate further development and improvements.

If you found this project helpful, give it a ⭐ on GitHub!