- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
“Before-After” Slider
November 15, 2010
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 <head> 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.
