- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
“Faded” Slider
November 15, 2010
This is a Slider Script that uses fade effect for slide change transition effects. This slider could be used not only for images but for various content blocks as well. You can find full installation and configuration instructions by following this link.
JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include the jquery.faded.js script and the jQuery framework:
Below you can see the HTML script representation for various content:
CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include the jquery.faded.js script and the jQuery framework:
The <head> section of the index-#.html (or the section just before the closing </body> tag) file contains these lines of code that initialize the script functionality with basic values:
This script is initialized with a <div> element with the #faded id. Script attributes define the following values:
• speed: 300 – sets animation speed;
• crossfade: false – crossfades content;
• bigtarget: false – click content for next;
• loading: false – for images only, checks if first image is loaded before showing it;
• autoheight: false – auto adjust height;
• pagination: “pagination” – sets true and class name for pagination; set to false to disable this feature;
• autopagination: true – set to true to auto generate pagination;
• nextbtn: “next” – next button class;
• prevbtn: “prev” – previous button class;
• loadingimg: false – location of loading image (e.g. /img/loading.gif) if using loading;
• autoplay: false – auto play of content (set to positive number for true); also sets time interval (use 1000 for 1 second);
• autorestart: false – auto restart if auto play stopped (set to positive number for true); also sets time interval (use 1000 for 1 second);
• random: false – set to true to randomize order.
HTML
Below you can see the HTML script representation for images:
In order to add a slide you will just need to add an image (<img> tag):
Below you can see the HTML script representation for various content:
In order to add a slide you will just need to a bulleted list item (<li> tag):
CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
