- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
“Coin” Slider
November 15, 2010
This is a Slider Script that can automatically cut images for creating various transition effects. 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 coin-slider.js script and the jQuery framework:
The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:
This script is initialized with a <div> element with the #coin-slider id. Script attributes define the following values:
• width: 565 – width of slider panel;
• height: 290 – height of slider panel;
• spw: 7 – squares per width;
• sph: 5 – squares per height;
• delay: 3000 – delay between images in ms;
• sDelay: 30 – delay between squares in ms;
• opacity: 0.7 – opacity of title and navigation;
• titleSpeed: 500 – speed of title appearance in ms;
• effect: ‘ ‘ – transition effect, random by default (random, swirl, rain, straight);
• navigation: true – prev/next and buttons;
• links : true – show images as links;
• hoverPause: true – pause on hover.
HTML
Below you can see the HTML script representation:
Each slide is an image (<img> tag), placed into a link (<a> tag). You can also add a slide description using the <span> element. In order to add a slide you will need to add the following structure:
CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
