jQuery.ulSlide

February 2nd, 2011 |

Responsive slider (or carousel) that supports “Slide”, “Crossfade”, “Fade”, “HTML5 Rotate”, “HTML5 Scale” and “Carousel” effects. Flexible, secure for html layout (do not changes structure of HTML) and very simple to use.

The plugin supports Responsive design, images Preloading, Lazy Load and Ajax. Any HTML can be used as slide content (not only images).

If the Mousewheel plugin has been included on the page then the slider will also respond to the mouse wheel (set “mousewheel” option as “true”).

For ulSlide in live see NIX Solutions Ltd. portfolio.

Features

  • Responsive
  • HTML5 Rotate, HTML5 Scale
  • Slide, Fade / CrossFade
  • Slide and Fade effects
  • Horizontal and Vertical sliding
  • Carousel
  • Auto-scrolling by timer
  • Scrolling by Mouse Wheel
  • Preload and Lazyload
  • Auto-resizing
  • Pager, useful navigation

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 href="#" id="e1_next"> Next </a>
<a href="#" id="e1_prev"> Previous </a>
<script type="text/javascript">
$(function() {
	$('#slide1').ulslide({
		effect: {
			type: 'slide', // slide or fade
			axis: 'y',     // x, y
			distance: 40   // Distance between frames
		},
		duration: 500,
		autoslide: 3000,
		width: 443,
		height: 300,
		mousewheel: true,
		nextButton: '#e1_next',
		prevButton: '#e1_prev'
	});
});
</script>

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.

Go to