All options

[option name]:[option default value]

[description of the option]
[Link(s) to example usage]

Controls
Slider behavior
Ajax
Full example

Controls

controlsShow:true

If set to false, the controls (the numeric controls, and the prev, next, last and first buttons) will not be shown.

controlsFade: true

If set to false, the next/previous/first/last buttons won't fade away, when reaching the end of the slider, and continous == false.

controlsFadeSpeed: '400'

The speed of the fade animation of the previous and next buttons, when reaching the end of the slider and
continuous == false and controlsFade == true.
You can also use the values 'fast', 'normal' or 'slow'. (Which means 200, 400 and 600 milliseconds.)

controlsAttr:'id="controls"'

The attributes used in the "span" tag, that encloses all the generated controls.
See designers guide for an explanation of exactly where this is placed.

prevNext:true

If false, the previous and next buttons will not be shown.
It's still possible to make a next and previous buttons with customLink.
demo of prevNext:false

prevHtml:'<a href="#" class="prevBtn"> previous </a>'

The HTML used for the previous button.
It can be anything, as long as it's valid HTML with minimum 1 tag enclosing the whole thing.
See designers guide for an explanation of where this HTML is positioned relative to the slider.

nextHtml:'<a href="#" class="nextBtn"> next </a>'

The HTML used for the next button.
It can be anything, as long as it's valid HTML with minimum 1 tag enclosing the whole thing.
See designers guide for an explanation of where this HTML is positioned relative to the slider.

firstShow: false

If set to true, the first button ('links' to the first slide) will be shown. (Default is that it's not shown. )

firstHtml:'<a href="#" class="firstBtn"> first </a>'

The HTML used for the 'first' button.
It can be anything, as long as it's valid HTML with minimum 1 tag enclosing the whole thing.
See designers guide for an explanation of where this HTML is positioned relative to the slider.

lastShow: false

If set to true, the last button ('links' to the last slide) will be shown. (Default is that it's not shown. )

lastHtml:'<a href="#" class="lastBtn"> last </a>'

The HTML used for the 'first' button.
It can be anything, as long as it's valid HTML with minimum 1 tag enclosing the whole thing.
See designers guide for an explanation of where this HTML is positioned relative to the slider.

numeric:false

If set to true, the numeric buttons will be shown.
The text in these buttons can be specified with numericText.

numericAttr:'class="controls"'

The attributes used in the "ol" tag, that encloses all the generated numeric buttons.
See designers guide for an explanation of exactly where this is placed.

numericText:['1']

The text used in the numeric buttons. This text is also used to specify the hash-url for each slide, which the history function use.
Example usage is numericText:['First button text', 'Button number 2','This text comes in button number 3']
Any length of text's can be used, since the default values (1,2,3,4,5,6......) will be inserted if nothing is specified.
If using history, all values used must be unique like ['text1','text2','test3']. (If nothing is specified, it will still just use 1,2,3,4... as default values.)
demo ussage of numericText

customLink:false

If set to a value (jQuery selector), all the matched objects can make a animation.
Example usage of this variable is: customLink: 'div#customLinkbox a'.
To specify what animation the slider is supposed to do, set a value in the "rel" attribute of the custromlink element. This can be a number (1,2,3..) or "next", "prev", "last", "first".
You can place the customLinks wherever you want, even inside ajax-loaded or JavaScript generated content. If the selector is matched, it will work.
Example usage in demo

insertAfter: true

If set to false, the controls will be inserted before the slider instead of after.
demo of InsertAfter:false

currentFunc:false

A function that is run when an element (a customLink or a numeric control) gains the "current" class, which it does when the link represents the current slide.
The t variable is the current slide number (starting from number 1).
It's run once pr. item.
Example usage:
currentFunc: function(t){ $(this).children().fadeTo(500, 0.3);}
Real world example

uncurrentFunc:false

Basically the same as currentFunc, but it's run when an element loses the "current" class.
But the t variable is the slide number of the slide it was on. (Still starting form 1).
It's still run once pr. element.
Real world example

Slider behavior

vertical:false

If set to true, the slider will do a vertical slide animation instead of a horizontal.
If set to true, make sure that the height of all elements is set to a pixel value.
If set to true, set autoheight to false, since autoheight breaks when vertical is true.
demo of vertical:true

speed:'800'

This number value specifies the speed of the sliding animation in milliseconds.
You can also use the values 'fast', 'normal' or 'slow'. (This means 400, 800 and 1200 milliseconds.)

ease:'swing'

Set the easing the document should make the animation with. This affects all sliding animations.
There are 2 easings included in jQuery, and they are 'swing' and 'linear'
Like any other jQuery plugin, you can also use non default easings, if you include a external JavaScript. Like the jQuery Easing Plugin.

auto:false

If set to true, the slider will automatically slide to the next slide after a specified period of time (see pause).
This does not work with history, and it's not supposed to.
demo of auto:true

pause: '2000'

Sets the duration of the pause (from one animation stops, till the next begin) in milliseconds, when auto is true.

continuous:false

If set to true, the slider will be continuous. Meaning that when sliding to the left of the first slide, you get the last (and if you slide the right of the last, you get the first).
You could also say that the slider goes in a loop, if you continuously slide in one direction.
demo of continuous:true

clickableAni:false

If set to true, it is possible to click a control during a animation, and start a new animation immediately (the 'old' will stop).
This only affects sliding animation, not fading animations.
It's not a good idea to use this with history, since it can create some flickering (just don't do it, it looks weird).
It's also not a good idea to use with "continuous:true", since it can cause the slider to act strange in some extreme situations.
demo of clickableAni:true

updateBefore: false

If set to true, the numeric buttons (and the customLinks) will be given the class current when an animation is started, instead of when it finishes.
demo of updateBefore:true

history:false

If set to true, the slider will track which slide you are at, by the URL. Meaning that bookmarks and the browsers back/forward buttons are supported. In IE6 this causes a full page reload at the end of a animation, but it works.
History works fully with fading animations, but if the user quickly changes 2 history "events" back, it can cause a image being changed instantly, instead of a fading animation.
history:true in demo
Real world example usage

speedhistory:'400'

Specifies the animation speed in milliseconds of the animation, when the animation is caused by a user not clicking a button in the slider, but by clicking the browsers back or forward button.
You can also use the values 'fast', 'normal' or 'slow'. (This means 200, 400 and 600 milliseconds.)

autoheight:true

If set to true, it will automatically adjust the height of the slider, according to the height of the content within the current slide.
If using Ajax, the autoheight event will launch after all the content (including all images) has been loaded.
demo of autoheight:true

fade: false

If set to true, the animations will be a fading animation instead of a sliding animation.
Standard setting is a crossfading animation.
demo of fade:true

fadespeed:'1000'

The length of the entire fade animation in milliseconds.
You can also use the values 'fast', 'normal' or 'slow'. (Which means 200, 400 and 600 milliseconds.)

crossFade:true

If set to false, the fading animation will fade the whole slider (not the controls) out, and then fade it in. This looks best under some circumstances.
Examples: crossfade:true, crossfade:false

beforeAniFunc:false

This function runs before the animation (any animation) starts.
Example usage: beforeAniFunc: function(t){ alert($(this).html()); }
The t variable is the number the slide have (the one the slider is animation towards). (As an example, the value of t is 2, when it's the second slide)
And the variable 'this' is the slide it is animation towards.
If you can't make things like "$(this).fadeOut(400);" work, try "$(this).children().fadeOut(400);"
Example usage in demos

afterAniFunc:false

Same as beforeAniFunc. It's just runs after the animation (still any animation) has finished.
Example usage in demos

Ajax

ajax:false

With this variable, you can set which ajax documents are loaded into the slides.
Example usage is: ajax: ['images/01.jpg', 'somedocument.html', 'images/anotherpic.png', false, 'lastdocument.html']
In that example, slide 1,2,3 and 5 is are ajax-enabled, and the ajax content is loaded into the slides, but slide number 4 isn't touched.
The JavaScript checks the file extension to see if it's an image (currently accepts ".jpg", ".png", ".bmp", ".gif"), if it's an image, it loads the image into a img tag in the slide, and checks if the image is to wide. If the image is to wide, it will be scaled down to fit the slide.
If it's not an image, the document will be loaded into the slide using the jQuery .load function. Which means that you can specify an element within a document (example "somedocument.html#section1").
The default behavior of the JavaScript is to load the current slide and the next + previous slide. You can make the javascript load every ajax document at load by changing preloadAjax to true.
Example usage in demo

preloadAjax:false

If set to true, the JavaScript will load every ajax document into the slides when the JavaScript starts.
The standard is that an ajax document/image is only loaded when needed.

loadingText:false

Sets the text that's shown before the ajax-content has been loaded.
Example usage is: loadingText:'This document has yet to be loaded'

startSlide:false

Define the first slide to be shown. Example usage is startSlide:'2', which makes the slider show the second slide on load (the first slide is number '1', and not '0').
Example usage in demos

imgAjaxFunction:false

Using this variable, you can set a function to be run after an image has been loaded into a slide. Any JavaScript can be used.
The "this" value is html of the slide, containing the image.
Example usage:
imgAjaxFunction: function(t){ alert($(this).html()); }
The t variable is the number the slide have. (As an example, the value of t is 2, when it's the second slide)
And the variable 'this' is the slide (not the image). Therefore, this this won't work "$(this).attr('src');" but this will $(this).children('img').attr('src');
Example usage in demos

docAjaxFunction:false

The same as the imgAjaxFunction, only thing is that it's run after an document has been loaded, instead of a image.
Example usage:
docAjaxFunction: function(t){ alert($(this).html()); }
The t variable is the number the slide have. (As an example, the value of t is 2, when it's the second slide)
And the variable 'this' is the slide.
If you can't make things like "$(this).fadeOut(400);" work, try $(this).children().fadeOut(400);

Full example

With all options set to their default values.

$(document).ready(function(){    
    $("#slider").easySlider({ 
        prevNext:          true,
        prevHtml:          '<a href="#" class="prevBtn"> previous </a>',
        nextHtml:          '<a href="#" class="nextBtn"> next </a>',
        controlsShow:      true,
        controlsAttr:      'id="controls"',
        controlsFadeSpeed: '400',
        controlsFade:      true,
        insertAfter:       true,
        firstShow:         false,
        firstHtml:         '<a href="#" class="firstBtn"> first </a>',
        lastShow:          false,
        lastHtml:          '<a href="#" class="lastBtn"> last </a>',
        numericAttr:       'class="controls"',
        numericText:       ['1'],
        vertical:          false,
        speed:             '800',
        ease:              'swing',
        auto:              false,
        pause:             '2000',
        continuous:        false,
        clickableAni:      false,
        numeric:           false,
        updateBefore:      false,
        history:           false,
        speedhistory:      '400',
        autoheight:        true,
        customLink:        false,
        fade:              false,
        crossFade:         true,
        fadespeed:         '1000',
        ajax:              false,
        loadingText:       false,
        preloadAjax:       false,
        startSlide:        false,
        imgAjaxFunction:   false,
        docAjaxFunction:   false,
        beforeAniFunc:     false,
        afterAniFunc:      false,
        uncurrentFunc:     false,
        currentFunc:       false
    });
});