When I noticed the growing popularity of JS-Slide and JS-Fade effects I have decide to develop a plugin for jQuery. This plugin will help you to add thise effects to the site in more simple way. If the mousewheel plugin has been included on the page then the slider will also respond to the mouse wheel.

Code example

<ul id="slide1">
    <li> <img src="images/image-1.jpg" alt="" /></li>
    <li> <img src="images/image-2.jpg" alt="" /></li>
    <li> <img src="images/image-3.jpg" alt="" /></li>
</ul>
<a id="e1_prev" href="#"> Previous </a> | <a id="e1_next" href="#"> Next </a>

<script type="text/javascript">
jQuery(function() {
    jQuery('#slide1').ulslide({
                                 width: 443,
                                 height: 'auto',
                                 bnext: '#e1_next',
                                 bprev: '#e1_prev',
                                 axis: 'x',
                                 autoslide: 2000
                              });
});
</script>

How to switch to the custom frame?

Below you can see code, which sets third frame on the slider:

<a id="set_third_frame" href="#">Set third frame</a>

$('#set_third_frame').click(function(){
    var slider = $('#slide1')[0];
    slider.uslCurrent(2); // 0 - first, 1 - second...
    slider.uslRefresh();
});

Plugn options

width (integer) (optional)
Width. You can set in CSS.

height (string) (optional)
Height. You can set in CSS. If you set both of them to ‘auto’ the size of the object will be adjusted to the size of the next frame, when the frame is changed.

affect (string) (optional)
Effect Type. Possible values: ‘slide’ or ‘fade’. By default ‘slide’.

axis (string) (optional)
Axis for Slide-effect. It can take values ‘x’ or ‘y’. By default ‘x’.

direction (string) (optional)
The order of slides (direction for Slide-effect). It can take values ‘f’ or ‘b’. By default ‘f’.

duration (integer) (optional)
Time of sliding in milliseconds. By default ’600′.

autoslide (mixed) (optional)
Interval between the frames changing in milliseconds. By default ‘false’ – auto change is disabled.

current (integer) (optional)
Frame number to start. By default ’0′ – first slide.

padding (integer) (optional)
The distance between frames in pixels for Slide-effect. By default ’20′.

statusbar (boolean) (optional)
During images loading status bar will be displayed (Inscription “Loading”). Recommend to customize. By default ‘false’.

navigator (selector) (optional)
Selector of the set of elements that would lead you to the appropriate slides. It lets you create something like Tabs.

bnext (selector) (optional)
Selector of the Next slide button.

bprev (selector) (optional)
Selector of the Previous slide button.

mousewheel (boolean) (optional)
If the mousewheel plugin is installed on the site the slider will also respond to the mouse wheel.

print_current (selector) (optional)
Element displaying the current slide number.

onAnimate (function(settings, thisEl)) (optional)
Frame changing event.