The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Sliced Image Slider
This plug-in provides sliced Image Navigation. The plugin loops through the given images and displays each image partitioned into n number of slices. The number of slices is a parameter that should be passed as an argument to the function. It also has other options like direction in which you want the image to slide. Following are the details on how to use the plugin.
For demo, visit: http://calyan.co.cc/ImageSlider.php
The code is pretty simple and straight. It is also easy to customize for future requirements.If anyone intrested,
please download the code from the demo page and proceed further.
Happy Programming....:)
Markup
<div id="wrapper">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>Styles
#wrapper
{
height:225px;
width:500px;
overflow:hidden;
position:relative;
}
#wrapper ul
{
margin:0;
padding:0;
}
#wrapper ul li
{
float:left;
list-style-type:none;
}How to use the code
$(document).ready(function(){
$("#wrapper").slicer({
numberOfSlices: 10,
direction: 'leftRight',
duration: 1000,
sliceDelay: 100,
removeDirection: 'leftRight',
removeSliceDelay: 100
});
});