Loading images...

jQuery Parallax Slider

An awesome, responsive jQuery parallax slider with a declarative API for outside interactions across pages and views.

Default initialization options:

var options = {
			autoPlay			: 3000,//(mixed) (bool) false to disable, (int) duration to hold between slides in ms
			circular		: true,//(bool) true, will repeat, false, will stop at the end
			css3			: false, //(bool) enable CSS3 transitions?
			css3Easing		: 'ease',//(string) easing CSS3 for the animation
			easing			: 'swing',//(string) easing effect for the animation
			easingBg		: 'swing',//(string) easing effect for the background animation
			fadein: 1000, //(int) ms after images loaded fade in duration
			hash			: true, //(bool) use hashes to track the current slide in history
			speed			: 1000,//(int) speed of each slide animation in ms
			thumbs			: true,// (bool) true enables thumbnails, false disables
			thumbRotation	: 5,//(mixed): (int) degrees thumbs will be randomly rotated, bool false to disable rotation
			thumbAnimate 	: -10, //(int) px to animate thumbnails
			thumbAnimateTime: 100, //(int) ms animation for thumb animation
			numBackgrounds: 3, //(int) Number of parallax backgrounds
			customBackground: false, //(string) Custom Background markup
			debug: false //(bool) true: enable console statements for debugging
		};

jQuery.parallaxSlider API

Play / Resume

$().parallaxSlider('play');

Stop / Pause

$().parallaxSlider('stop');

Refresh

Refreshes positioning, elements, and recomputes layout. Useful if the DOM has been modified by other logic

$().parallaxSlider('refresh');

Go to slide, index 2

$().parallaxSlider('slide', 2);

Uses JS array index 0 for the first slide.

Destroy

Cleans up any dom elements or other things that may affect mobile performance.
$().parallaxSlider('destroy');
Changelog