/jquery.sldr

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

Primary LanguageJavaScriptMIT LicenseMIT

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)

  1. Settings. Flexible setup. Next, previous, pagination, and element toggle selector definitions.
  2. Setup. Multiple slide width, visible stage, and fully responsive.
  3. Callbacks. Callbacks on initialization, individual slide load (via post load), slide start, slide complete.
  4. Post Load. Post image load feature. Progressively loads images after the page is loaded.
  5. ¡To do! Animation Hook. Define your own animation.
  6. 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

  1. Make base.resizeElements work with offset option.
  2. 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.
  3. Rework base.fillGaps to work with post loaded images.
  4. Establish method for passing updated args on to callback functions if using the Animation Hook.
  5. A shadow box mode.

settings

focalClassThe 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).
selectorsSelectors for the paginating elements. Example "$('ul > li')". No Default.
toggleA series of elements to toggle the focalClass of. Can be used to show/hide captions. Example "$('.descriptions > div'')" No Default.
nextSlideSelector for the next slide. No Default.
previousSlide Selector for the previous slide. No Default.
hashChangeOptional boolean that gets passed through the callback args. Defaults to false.
resizeDelayDelay for the window resize. Defaults to 1.
sldrNumberNumber of slides that increases when the sldr is initiated. Defaults to 0.
sldrInitCallback. Accepts function name. When the sldr is initiated, before the DOM is manipulated. No Default.
sldLoadedCallback. Accepts function name. When individual slides are loaded. No Default.
sldrLoadedCallback. Accepts function name. When the full slider is loaded, after the DOM is manipulated. No Default.
sldrStartCallback. Accepts function name. Before the slides change focal points. No Default.
sldrCompleteCallback. Accepts function name. After the slides are done changing focal points. No Default.
sldrWidthThe 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.
animateJqueryForce default animation to jquery animate(). Defaults to false using CSS transitions. Browsers that do not support CSS transitions use jquery animate().
sldrAutoAuto timer for transition. Defaults to false.
sldrTimeAuto timer time transition time. Defaults to 8000.
isBrowserVariable for setting browser. Defaults to the navigator.userAgent.
isIEVariable 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:

sldSlide jQuery object.
slideNumSlide number.
idSlide id.
class_nameSlide class.
htmlSlide inner html()

Callback:

sldrjQuery object of the slider.
prevFocalIndexThe index() of the previous slide.
prevSlideNumThe slide number of the previous slide.
currentFocalIndexThe index() of the current slide.
currentClassThe class of the current slide.
currentIDThe id of the current slide
currentFocalPointThe pixel distance from the left of the slide group to the center.
currentSlideNumThe slide number of the current slide
shiftWidthThe amount of change from one slide to the next.
nextFocalIndexThe index() of the next slide.
nextSlideNumThe 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>