With default options:
$('#default').slidy();
<div id="default">
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
</div>
<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:
- The types are: 'normal', 'fade' and 'slide'.
$('#pause').slidy({
animation: 'fade',
cursor: 'wait',
pause: true
});
<div id="pause">
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
</div>
animation: 'fade',
cursor: 'wait',
pause: true
});
<div id="pause">
<img src="image-1.jpg"/>
<img src="image-2.jpg"/>
<img src="image-3.jpg"/>
</div>
- If the option 'children' was an element <a/>, then the menu will takes the value of "href" as a link;
- Otherwise the "title" attribute will be takes.
$('#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>
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>
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:
action: 'mouseenter'
Action to change the slide. ('mouseenter' or 'click')
animation: 'normal'
Type of the animation effect. ('normal', 'fade' or 'slide')
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.
width: 500
Width in pixel of the image banner.