- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
og体育首页ONE Subscrioption
“Sliced Image” Slider
November 15, 2010
This is a Slider Script that represents an image navigation plug-in. Its feature is the image transition effect: the animation cuts the image and moves each slice separately. The number of slices and slice movement direction are optional.
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 jquery.slices.1.2.js script and jQuery framework:
The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:
This script initializes an element (a • direction:’…’ – slice movement direction (leftRight, topDown, rightLeft, bottomUp); HTML All the necessary images are placed to a bulleted list ( CSS tag) #wrapper id. Here script attributes define the following values:
• sliceDelay – a delay between slice movements (pay attention: not slide delay);
• numberOfSlices – number of slices the slide is cut to (pay attention: the more slices you have, ).
Below you can see the HTML script representation: tag) that is placed to main
tag with #wrapper id and .slide-box class. So in order to add an extra slide you will need to add the following coding structure:
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
