“Before-After” Slider

This is a Slider Script that allows you to show two images in a single container and drag one image over another which is good for “before-after” comparison.

This plug-in has several important advantages:
• Low file size (only 7 Kbytes);
• You can use it many times on the same page;
• When JavaScript is disabled you will not lose a container, it will just show the first image.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code:

The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

If you want to set specific attributes for the slider you will need to define them when you initialize the plug-in.

Here the script attributes define the following values:
•  animateIntro – if this attribute is set to true, the slider will slowly move (false by default);
•  introDelay: 2000 – if animateIntro is set to true, this attribute defines a delay before the animation starts;
•  introDuration: 500 – if animateIntro is set to true, this attribute defines total animation time;
•  showFullLinks: false – defines whether to show the links that allow to see full images (“before” or “after”) at once.

HTML
In order to create a slider you will need to define two images that have fixed width and height.
Below you can see the HTML script representation:

CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:

Make sure to set overflow: hidden; for #container id.