[contact-form-7 id="24078" title="Feedback EN"]

“Sliced Image” Slider

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 <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, ).

HTML
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:

CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:

"Sliced Image" Slider, 1.0 out of 5 based on 1 rating