Categories

«Before-After» Slider

Template-help.com Team Ноябрь 15, 2010
No votes yet.
Please wait...

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.

Эта запись была размещена в Слайдер и помечена как jQuery, slider. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов