svUltimateSlider is a jQuery plugin meant to make it easy for users to create some amazing content sliders/slideshows. The focus during the creation of this plugin was allowing users to easily control/define transitions.

Features:

• Slides support any html content(not just images)
• Incredibly small at just 4kb minified(7kb with included transitions)
• 30 included transitions to look through and play with
• Create custom transitions easily!
• Full control over controls(create your own look & feel)
• Autoplay as well as AutoPause on hover
• Onend/Onstart callback functions

Documentation:

(please read the documentation thoroughly before contacting me for support)

• The Html & CSS
• How It Works
• Using The Plugin
• Transitions Explained
• Creating And Adding Transitions
• The Premade Transitions

The HTML & CSStop^

The markup is very simple, the slides themselves are just list items. They can contain any html markup you wish them to have.

<ul class='slider'>
	<li>Slide one content</li>
	<li>Slide two content</li>
	<li>Slide three content</li>
	<li>Slide four content</li>
</ul>

The CSS is just as simple, give the ul and list elements all the same width/height and set the overflow to hidden for each.

ul.slider{	
	list-style: none;
	margin: 0;
	padding: 0;
	height:250px;
	width:600px;
	display:block;
	position:relative;
	overflow:hidden;
}
ul.slider li{
	display:block;
	padding:0;
	margin:0;
	height:250px;
	width:600px;
	position:relative;
	overflow:hidden;
}

And that is all the setup you need before initializing and using the script.

How It Workstop^

Each slide(list item) is stacked on top of each other, with the current slide being on top.

When a transition takes place, a slide is basically broken down into a grid based on the specified rows and columns(the image below simulates how a transition with 8 columns and 3 rows would be broken down).

The blocks(or rows or columns) are then animated to either reveal the slide below or to form the next slide in the slideshow.

So basically different transitions are created by specifying a different amount of rows and columns to break the slide down into as well as animate different CSS attributes of the blocks(or rows or columns). Only 5 css attributes of the blocks(or rows or columns) are meant to be animated to create the transitions;'top','left','width','height' or 'opacity'. For example, the transition simulated in the image above breaks down the slide into 8 columns, 3 rows. And it animates the CSS attributes 'left', 'top' and 'opacity' of the blocks created by the grid.

NOTE:

It is extremely important that you understand that only those 5 css attributes are meant to be animated in order to create the transitions

Now on to actually using the plugin...

Using the Plugintop^

(only available in after purchase in download)

Transitions Explainedtop^

The transitions are they themselves objects and are held in the 'transitions' object of the script.

fade = {
		duration:800,
		delay:0,
		css:{opacity:0},
		columns:1,
		rows:1,
		order:'normal',
		easing:'linear',
		slide:'current'
	}

Each transition object holds 8 properties that define the transition(remember the images/description above).

'duration' is how long each block(or column or row) is animated.

'delay' is the time between when one block(or column or row) starts animating and the next block(or column or row) starts animating.

'css' is an object of css properties passed directly to jQueries 'animate' method for each block(or row or column). IF you are animating the 'current' slide to create the transition then this object is meant to hold the value to which the blocks will be animated to. IF you are animating the 'next' slide, this object will be applied to the blocks BEFORE they are animated to their final position. Please see the 'animate' documentation about how to form these parameters. Also, as previously mentioned, only 5 css attributes of the blocks(or rows or columns) are meant to be animated to create the transitions; 'top','left','width','height' or 'opacity'

'columns' is the number of columns to break the slide down into

'rows' is the number of rows to break the slide down into

'order' is the order the blocks are animated in, either 'normal', 'reverse' or 'random'. Normal will animate the rows/columns/blocks from left to right and top to bottom. Reverse will animate them from right to left and bottom to top. Random will randomly choose blocks/rows/columns to animate.

'easing' is an optional easing function to pass to the animate method if you are using the easing plugin. Just adding an easing function to a transition can give it a completely different effect. jQuery ships with two easing options by default 'swing' and 'linear', this script will default to 'swing' for all transitions if the easing plugin is not available.

'slide' tells the script whether you want to break down and animate either the current slide or the next slide to create the transition. Can either be 'current' or 'next'.

NOTE: The script is setup to default to values set in the 'fade' animation above if a property is missed or not included in the transition being called. It is also set to fallback to the fade transition as a whole if the transition wanted does not exist.

Creating and Adding Transitionstop^

(only available in after purchase in download)

The Premade Transitionstop^

(only available in after purchase in download)