Support Help, Documentation & Customization

Customization Options

You can pass a few different custom parameters to change the way that SlideDeck is presented and interacted with. Just pass a single object to the .slidedeck(); action.

Formatting customization options

$('dl.slidedeck').slidedeck({
    speed: 1000, // one second for the sliding to complete
    autoPlay: true, // auto play turned on
    index: false, // hide the spine numbers
    transition: 'linear' // slide transition style
}).vertical();


speed

Integer – The speed in milliseconds at which the movement of each slide happens (default: 500).

transition

String – The easing method to transition between each slide. jQuery by default only has 'linear' and 'swing' as options, so you will need to load an additional jQuery easing library for more options. (default: 'swing')

slideTransition

String – This option changes the default slide transition to fade, flip, flipHorizontal, stack. (default: slide)

// Change the slide transition
$('dl.slidedeck').slidedeck({
	slideTransition: 'fade'
});
start

Integer – The slide to start on (default: 1)

index

This option can be passed a boolean value to turn on/off the slide indexes. You can also optionally pass an array for the index labels. (default: true)

// Turn off the spine index numbers
$('dl.slidedeck').slidedeck({
	index: false
});
// Use custom text for the spine labels
$('dl.slidedeck').slidedeck({
    index: ['A','B','C','D','E','F','G']
});
scroll

Boolean – This option can be passed a boolean value to turn on/off the mouse wheel scrolling ability (which requires a mouse wheel extension to operate). You can also set this to the string value 'stop' to prevent the window from scrolling when the mouse cursor is hovering over the SlideDeck. (default: true)

keys

Boolean – This option can be passed a boolean value to turn on/off the ability to navigate the SlideDeck with the left and right arrow keys (default: true).

activeCorner

Boolean – Add a tag to each slide that will act as a small indicator overlapping the content (default: true).

hideSpines

Boolean – Hide the spines (slide titles) for each slide to get more space for your slides (default: false).

autoPlay

Boolean – Automatically progress through slides. AutoPlay will stop autoplaying if a user interacts with the SlideDeck navigation (default: false).

autoPlayInterval

Integer – The interval at which the slides should progress at in milliseconds. This option is only used if autoPlay is turned on (default: 5000).

cycle

Boolean – Automatically cycle the SlideDeck back to the first slide when using the keyboard or mouse to navigate. This feature is also useful when used in conjunction with the autoPlay option (default: false).

controlProgress

Boolean – Lock down slides to prevent the user from interacting with the SlideDeck. Use the .progressTo(#) method go to a slide and unlock access to the slides between. This option is useful for controlled, multi-step forms (default: false).

cufonRefresh

String – Specify the slide titles to be refreshed upon slide animation when using cufon font treatment on slide titles. NOTE: When you define Cufon.replace() definitions, it is recommended you specify a definition specifically for your slide titles and then pass that specification to this option.

// Have a Cufon.replace() action specifying the slide titles
Cufon.replace('dl.slidedeck dt');

// Pass the CSS path to the cufonRefresh option
$('dl.slidedeck').slidedeck({
	cufonRefresh: 'dl.slidedeck dt'
});
complete

Function – Pass a function to run after the user has moved to a slide. This function will be run on each slide and receives the SlideDeck object as a parameter so it can be interacted with in the function.

$('#deck_1').slidedeck({
	complete: function(deck){
		// Alert the current slide number after animating
		alert(deck.current);
	}
});
before

Function – Pass a function to run before the user has moved to a slide. This function will be run on each slide and receives the SlideDeck object as a parameter so it can be interacted with in the function.

$('#deck_1').slidedeck({
	before: function(deck){
		// Alert the current slide number before animating
		alert(deck.current);
	}
});
touch

Boolean – This option can be passed a boolean value to turn on/off touch support for the SlideDeck. On by default (default: true).

touchThreshold

Object– This option can be passed an object with the keys of x & y and values as integers. This controls the distance threshold for supported touch devices. The higher the coordinate value the greater the gesture movement is required to perform a swipe action (default: { x:50, y:50} ).

// Set the touchThreshold to 100 for both x & y
$('dl.slidedeck').slidedeck({
	touchThreshold: {x:100, y:100}
});
New version released with support for Parallax and Ken Burns effect Buy It Now
Hello. Add your message here.