Minimal Image Comparison Slider Plugin For jQuery

A super tiny (~1kb) jQuery plugin for creating a comparison slider on your before/after images that react to where the users mouse is on the page.

How to use it:

1. Place the jQuery Before/After Web Slider's stylesheet before_after.css in the header of the webpage.

<link rel="stylesheet" href="before_after.css">

2. Embed your own before/after images to the slider.

<div class="before_after_slider">
  <div class="before">
    <img src="before.jpg">
  </div>
  <div class="after">
    <img src="after.jpg">
  </div>
  <div class="separator_line">
</div>

---

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