Before and After Slider

This is my attempt at creating a before after slider that is both responsive and mobile-friendly.

Instructions

Include 'baslider.js' on your page.
Include 'baslider.css' on your page. You can also put this in your stylesheets if you fancy.

Use the following format to create a slider:

<div class="ba-slider">
	<img src="img/slider-1a.jpg" alt="" />
	<img src="img/slider-1b.jpg" alt="" />
</div>

Initialize BASlider on the windows load event:

 window.onload = function () {
 	$('.ba-slider').beforeAfter();
 }

Everything is CSS-driven. Pull up your inspector to tweak things to your liking.

Important classes:

'.ba-control-bar' - This is the line that splits your two images.
'.ba-control-handle' - This is a rectangular handle that is centered on the bar.
'.ba-left-arrow' & '.ba-right-arrow' - Arrows!

Note: The arrows are positioned absolute so if you change their dimensions you will have to change the margins that help center them.