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. For ulSlide in live see NIX Solutions Ltd. portfolio. See more examples!
Features
Slide and Fade effects
Carousel
Horizontal and Vertical sliding
Auto-scrolling by timer
Scrolling by Mouse Wheel
Preload and Lazyload
Auto-resizing
Pager / useful Navigation
Demo preview
Code example
?
1
2
3
4
5
6
7
Next
Previous
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
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.
effect[‘type’] (string) (optional)
Effect Type. Possible values: ‘slide’, ‘fade’ or ‘carousel’. By default ‘slide’.
effect[‘axis’] (string) (optional)
Axis for Slide-effect. It can take values ‘x’ or ‘y’. By default ‘x’.
effect[‘showCount’] (string) (optional)
Use ‘showCount’ for carousel. Number. By default ‘x’.
effect[‘distance’] (integer) (optional)
The distance between frames in pixels for Slide-effect. By default ’20′.
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.
statusbar (boolean) (optional)
Add class “usl-loading” during images loading. Recommend to customize. By default ‘true’.
lazyload (boolean) (optional)
Load images when slide is loads. By default ‘false’.
ajax (boolean) (optional)
Load content of frame via ajax. URL takes from the “pager”. By default ‘false’.
pager (selector) (optional)
Selector of the set of elements that would lead you to the appropriate slides. It lets you create something like Tabs.
nextButton (selector) (optional)
Selector of the Next slide button.
prevButton (selector) (optional)
Selector of the Previous slide button.
printCurrentTo (selector) (optional)
Element displaying the current slide number.
mousewheel (boolean) (optional)
If the mousewheel plugin is installed on the site the slider will also respond to the mouse wheel.
onAnimate (function(settings, thisEl)) (optional)
Frame changing event.
onAnimateStart (function(settings, thisEl)) (optional)
Before frame changing.