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.
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 <head> 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 <div> tag) #wrapper id. Here script attributes define the following values:
• direction:’…’ – slice movement direction (leftRight, topDown, rightLeft, bottomUp);
• 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:
All the necessary images are placed to a bulleted list (<ul> tag) that is placed to main <div> 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:
"Sliced Image" Slider,