Tiny jQuery Image Slideshow with Slice Transition Effect - slydify

slydify is a lightweight and fast jQuery plugin for creating an image slideshow with support for slice transition and easing effects.

How to use it:

1. Wrap the images you want to slide in an DIV container.

<div id="slider"> 
<img src="images/1.jpg"/> 
<img src="images/2.jpg"/> 
<img src="images/3.jpg"/> 
<img src="images/4.jpg"/> 
</div>

2. Load the jQuery javascript library and jQuery slydify plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/slydify.js"></script>

3. Load the jQuery slydify's stylesheet file in the head of the page. Feel free to change the CSS style to meet your needs.

<link rel="stylesheet" href="css/slydify.css">

4. Call the plugin with default settings.

<script>
$(function() {
$("#slider").slydify();
});
</script>

5. All the settings.

<script>
$(function() {
$("#slider").slydify({
sliceCount: 8,
easing: 'ease-in',
sideColor: '#222',
startPosition: 0,
blockRows: 6,
blockColumns: 6,
blocksDelay: 100,
blocksDuration: 350,
blindsDuration: 350,
blindsDelay: 100,
zipDuration: 350,
zipDelay: 50,
barsDuration: 400,
barsDelay: 40});
});
</script>

---

This awesome jQuery plugin is developed by rneyland. For more Advanced Usages, please check the demo page or visit the official website.