A content slider featuring responsive slides, flexible slide widths, callbacks, and custom animation hooks.

jquery.sldr

updates

v1.1 : added touchswipe, hardware accelerated animation, optimized positioning function to remove glitch in IOS, removed redundant DOM selectors, modified responsive function to update wrapper width on resize

features (the demo)

Settings. Flexible setup. Next, previous, pagination, and element toggle selector definitions.
Setup. Multiple slide width, visible stage, and fully responsive.
Callbacks. Callbacks on initialization, individual slide load (via post load), slide start, slide complete.
Post Load. Post image load feature. Progressively loads images after the page is loaded.
¡To do! Animation Hook. Define your own animation.
Support for IE 7+, Chrome, Safari, Firefox, IOS 3+, Android 3+. Not tested in Opera or older versions of Chrome, Safari, Firefox. Easing supported with jquery.easing.1.3.js.

to do

Make base.resizeElements work with offset option.
Responsive Height Option. By default, the slider's height is responsive if the using 100% width block images. May include function however to set the style of the slider's height.
Rework base.fillGaps to work with post loaded images.
Establish method for passing updated args on to callback functions if using the Animation Hook.
A shadow box mode.

settings

focalClass	The classname of the focal point of the slider (or 'active' slide). Defaults to 'focalPoint'.
offset	¡To do! The center point of the slider. Defaults to "$(this).width() / 2" (or center of the slider).
selectors	Selectors for the paginating elements. Example "$('ul > li')". No Default.
toggle	A series of elements to toggle the focalClass of. Can be used to show/hide captions. Example "$('.descriptions > div'')" No Default.
nextSlide	Selector for the next slide. No Default.
previousSlide	Selector for the previous slide. No Default.
hashChange	Optional boolean that gets passed through the callback args. Defaults to false.
resizeDelay	Delay for the window resize. Defaults to 1.
sldrNumber	Number of slides that increases when the sldr is initiated. Defaults to 0.
sldrInit	Callback. Accepts function name. When the sldr is initiated, before the DOM is manipulated. No Default.
sldLoaded	Callback. Accepts function name. When individual slides are loaded. No Default.
sldrLoaded	Callback. Accepts function name. When the full slider is loaded, after the DOM is manipulated. No Default.
sldrStart	Callback. Accepts function name. Before the slides change focal points. No Default.
sldrComplete	Callback. Accepts function name. After the slides are done changing focal points. No Default.
sldrWidth	The width of the slider. Set to 'responsive' for full width slides. Set to number for fixed width. Defaults to the width of the slider.
animate	¡To do! Hook for custom animation. Accepts function name. Defaults to "base.animate" in jquery.sldr.js.
animateJquery	Force default animation to jquery animate(). Defaults to false using CSS transitions. Browsers that do not support CSS transitions use jquery animate().
sldrAuto	Auto timer for transition. Defaults to false.
sldrTime	Auto timer time transition time. Defaults to 8000.
isBrowser	Variable for setting browser. Defaults to the navigator.userAgent.
isIE	Variable for Internet Explorer. Defaults to false. Will be set to true based on navigator.userAgent.

example setup

Markup:

Each slide element requires at least one unique class that must appear first in the attribute value.

<div id="SLDR-ONE" class="sldr">
	<ul class="wrp animate">
		<li class="elmnt-one"><img src="img/Lake.jpg" width="1000" height="563"></li>
		<li class="elmnt-two"><img src="img/Mountain-Range.jpg" width="1000" height="563"></li>
		<li class="elmnt-three"><img src="img/Mt-Fuji.jpg" width="1000" height="563"></li>
		<li class="elmnt-four"><img src="img/Pink-Forest.jpg" width="1000" height="563"></li>
	</ul>
</div>

CSS:

This CSS uses positioning to move the slide from left to right but alternate styling can be used to create different types of transitions.

.sldr {
	max-width: 825px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	clear: both;
	display: block;
}

.sldr > ul.animate {
	-webkit-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
       -moz-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
         -o-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); 
            transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */	
}
	
.sldr > ul > li {
	float: left;
	display: block;
	width: 825px;
}

jQuery:

$( window ).load( function() {

	$( '.sldr' ).each( function() {
		var th = $( this );
		th.sldr({
			focalClass    : 'focalPoint',
			offset        : th.width() / 2,
			sldrWidth     : 'responsive',
			nextSlide     : th.nextAll( '.sldr-nav.next:first' ),
			previousSlide : th.nextAll( '.sldr-nav.prev:first' ),
			selectors     : th.nextAll( '.selectors:first' ).find( 'li' ),
			toggle        : th.nextAll( '.captions:first' ).find( 'div' ),
			sldrInit      : sldrInit,
			sldrStart     : sldrStart,
			sldrComplete  : sldrComplete,
			sldrLoaded    : sldrLoaded,
			sldrAuto      : true,
			sldrTime      : 2000,
			hasChange     : true
		});
	});

});

callbacks

/**
 * When the sldr is initiated, before the DOM is manipulated
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrInt( args ) { }

/**
 * When individual slides are loaded
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldLoaded( args ) { }

/**
 * When the full slider is loaded, after the DOM is manipulated
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrLoaded( args ) { }

/**
 * Before the slides change focal points
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrStart( args ) { }

/**
 * After the slides are done changing focal points
 * @param {object} args the slides, callback, and config of the slider
 * @return null
 **/
function sldrComplete( args ) { }

callback arguments

Slides return an object of the following items;

{ 
	'slides' : { 
		(array of slides) 
	}, 
	'callback' : {
		(the previous, current, next slide variables)
	}, 
	'config' : {
		(all of the original settings described above) 
}

Slides:

sld	Slide jQuery object.
slideNum	Slide number.
id	Slide id.
class_name	Slide class.
html	Slide inner html()

Callback:

sldr	jQuery object of the slider.
prevFocalIndex	The index() of the previous slide.
prevSlideNum	The slide number of the previous slide.
currentFocalIndex	The index() of the current slide.
currentClass	The class of the current slide.
currentID	The id of the current slide
currentFocalPoint	The pixel distance from the left of the slide group to the center.
currentSlideNum	The slide number of the current slide
shiftWidth	The amount of change from one slide to the next.
nextFocalIndex	The index() of the next slide.
nextSlideNum	The slide number of the next slide.

post load

The post load image feature can progressively load images one by one after the page has finishied loading any non-slider images, scripts, etc. To take advantage of it only the markup needs to be changed. Replace images with a markup element with a class of 'sldr-load'. When the plugin sees these elements it will grab the attributes 'class' , 'src' , 'alt' , 'title' , 'width' or 'height' and apply them to the image when it's ready. Below is the sample markup;

<div id="SLDR-ONE" class="sldr">
	<ul class="wrp animate">
		<li class="elmnt-one"><div class="sldr-load" src="img/Lake.jpg" width="1000" height="563"></div></li>
		<li class="elmnt-two"><div class="sldr-load" src="img/Mountain-Range.jpg" width="1000" height="563"></div></li>
		<li class="elmnt-three"><div class="sldr-load" src="img/Mt-Fuji.jpg" width="1000" height="563"></div></li>
		<li class="elmnt-four"><div class="sldr-load" src="img/Pink-Forest.jpg" width="1000" height="563"></div></li>
	</ul>
</div>