Slim Before-After Image Comparison Plugin

About

A simple pure Javascript plugin. You can easily show your before after images

Lightweight and Simple
Pure Javascript (No need Jquery or any depencies)
Mobile Ready (Touch enabled)
Customizable via CSS
Full Responsive
Bootstrap Compatible
RTL Support
Clean Code
Multipurpose
destroy() and refresh methods included.
Easy to Customize
Easy understanding commented code

Installation

STEP 1 : This plugin uses just one small CSS. Add to your document header.

				<link rel="stylesheet" href="src/css/slim-before-after.min.css">

STEP 2 : Then, just include plugin javascript file to your document. Add to your document.

				<script src="src/js/slim-before-after.min.js"></script>

How To Use


<!--Plugin HTML content Starts -->
<div class="slim-comparison-container" data-slim-params='{"position":"horizontal","startPosition": 40}'>
	<div class="slim-comparison-wrapper">
	      <div class="slim-before-wrapper">
	            <img src="img/before_image.jpg">
	            <span class="slim-before-caption">Before</span>
	      </div>
	      <div class="slim-after-wrapper">
	            <img src="img/after_image.jpg">
	            <a href="#" class="slim-after-caption">After</a>
	      </div>
	</div>
</div>
<!--Plugin HTML content Starts -->

<!--For more example visit the examples page.. -->

<!--INITIALIZING THE PLUGIN-- its very easy. with default parameter values-->
<script type="text/javascript">
	var MyComparison = new slimBeforeAfter();

	//use refresh method for dynamicly created elements.
	//MyComparison.refresh();

	//use destroy method if you want to destroy plugin.
	//MyComparison.destroy();

</script>

Options

plugin options and methods:

Name	Type	Default	Description
selector	string	".slim-comparison-container"	Plugin default container class selector.
position	string	"horizontal"	Plugin before after position. Values : "horizontal", "vertical"
labelPosition	string	"left"	Before and last caption positions. Values for Horizontal: "top", "center", "bottom". Values for Vertical: "left", "right".
startPosition	integer	50	Separator position. Values 0-100 (% as percent). 50 is center of plugin.
labelShowHover	boolean	false	Before and after caption show only is mouse hover or if false always show captions
loaderColor	string	"rgba(88,179,104,1)"	Plugin loader color. You can change with any color if you want.
loaderOverlayColor	string	"rgba(255,255,255,1)"	Plugin loader overlay color. default is white. You can change if you want.
seperatorColor	string	"rgba(255,255,255,1)"	You can change seperator color if you want.
seperatorShow	boolean	true	Show separator or hide if you want.
.refresh()	method		use refresh method for dynamicly created elements.
.destroy()	method		you can destroy your plugin with this method.

Styles

You can change styles with css. Find the element you want to change and make the changes you want with css.

Some examples:

				/*you can change caption box style like this:*/
.slim-before-caption,
.slim-after-caption{
	background-color:#F00 !important;
	color: #FFF !important;
	font-size: 24px;
}