jQuery Slidy - A Transition Plugin (current version: 0.1)
jQuery Slidy is a plugin that generates a customizable transitions automatically.
With default options:
$('#default').slidy();
<div id="default">
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
</div>
With effect transition, pause animation and custom cursor:
$('#default').slidy({
animation: 'fade',
cursor: 'wait',
pause: true
});
<div id="default">
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
</div>
With menu, custom children elements and time and speed control:
$('#menu').slidy({
animation: 'slide',
children: 'a',
menu: true,
pause: true,
speed: 400,
time: 4000
});
<div id="menu">
<a href="#"><img src="img/image-1.jpg" title="Nature"/></a>
<a href="#"><img src="img/image-2.jpg" title="Animals"/></a>
<a href="#"><img src="img/image-3.jpg" title="Clime"/></a>
</div>
With a group of elements:
$('.group').slidy({
animation: 'fade',
height: 97,
width: 240
});
<div class="group">
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
</div>
<div class="group">
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
<img src="image-1.jpg"/>
</div>
<div class="group">
<img src="image-3.jpg"/>
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
</div>
Default options:
children: 'img'
The element in which the transition will be done.
cursor: 'default'
The type of cursor that will be displayed when it stops over the banner.
height: 200
Height in pixel of the image banner.
menu: false
Created automatically a menu.
pause: false
Stop the transition when the mouse over the banner.
speed: 600
Duration in milliseconds of transition animation effect.
target: ''
Type of opening the link in the menu and the banner.
time: 3600
Duration in milliseconds of transition of the banners.
animation: 'normal'
Type of the animation effect. ['normal', 'fade' or 'slide']
width: 500
Width in pixel of the image banner.
