Usage and Implementation

SlideDeck requires jQuery 1.3+ to run and has only been tested in XHTML 1.0 Transitional and XHTML 1.0 Strict DOCTYPEs. Both the Lite and Pro versions of SlideDeck are distributed with a minified version of jQuery 1.3.2, or you can get the latest version from the jQuery website. Make sure your website is capable of using jQuery and one of the XHTML DOCTYPEs before implementing SlideDeck.

SlideDeck is compatible with most modern browsers including FF 3.1+, IE7+, Safari 3+, Chrome 2+ (sorry, FF2 and Opera are not supported due to lack of CSS transform support). SlideDeck will even work with some third-party libraries such as cúfon.

1. Include the necessary JavaScript files

Add the JavaScript include tags to the <head> tag in your HTML to load jQuery and the SlideDeck plugin library.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="slidedeck.jquery.js"></script>

Pro Version Feature: You may optionally include a jQuery Mouse Wheel Extension to take advantage of mouse wheel functionality for SlideDeck. SlideDeck also has support for the cúfon font treatment library; please include cúfon in the <HEAD> and define Cufon.replace(); entries before loading SlideDeck.

2. Add the SlideDeck skin CSS file (Pro Version Only)

This is not a necessary file to include as you can always customize the CSS within your primary CSS file, but it will be easier to edit by keeping things separate.

<link rel="stylesheet" href="slidedeck.skin.css" type="text/css" media="screen">

3. Create a definition list (`<DL>`)

SlideDeck uses the semantic definition list markup tag to build its structure. The SlideDeck plugin will automatically try and detect how large it should build itself if nothing is defined, but you can always specify dimensions in the skin's CSS file.

<dl>
    <dt>Slide 1</dt>
    <dd>Slide Content</dd>
    <dt>Slide 2</dt>
    <dd>Slide Content</dd>
    <dt>Slide 3</dt>
    <dd>Slide Content</dd>
    <dt>Slide 4</dt>
    <dd>Slide Content</dd>
    <dt>Slide 5</dt>
    <dd>Slide Content</dd>
</dl>

4. Fire plugin using jQuery selector

It is recommended that you run the slidedeck(); action in a document ready event. You can place the following code in a JavaScript tag (<script>) in the <head> of your HTML file or in an external JavaScript file. If you are not familiar with jQuery, please, read at least this tutorial for beginners.

$(document).ready(function(){
    
	// The most basic implementation taking all of the default options 
	$('dl').slidedeck();
	
	// You can also pass custom parameters to change the way the SlideDeck is interacted with.
	// The scroll and index parameters listed below are only available in the Pro version.
	$('dl').slidedeck({
		start: 2,
		speed: 1000,
		scroll: false,
		index: ['a','b','c','d','e']
	});
	
});

5. DONE!

Thats it! Now you have a SlideDeck on your website. Start flowing in HTML content for each slide in the <dd> tags and change slide titles in the <dt> tags.

Available 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.

speed	The speed in miliseconds at which the movement of each slide happens (default: `500`).
transition	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: `'linear'`)
start	The slide to start on (default: `1`)
index	Pro Version Feature: 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`)
scroll	Pro Version Feature: 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	Pro Version Feature: 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	Pro Version Feature: Add a tag to each slide that will act as a small indicator overlapping the content (default: `true`).

Available Actions

Once you have created a SlideDeck you can then control it and interact with it. It is easiest to interact with by assigning the firing of the method to a variable first. The SlideDeck plugin will return a single object if only one SlideDeck is created and will return an array of SlideDeck objects if multiple are created.

<dl id="deck_1" class="slidedeck">
    <dt>Slide 1</dt>
    <dd>Slide Content</dd>
    <dt>Slide 2</dt>
    <dd>Slide Content</dd>
    <dt>Slide 3</dt>
    <dd>Slide Content</dd>
</dl>

<dl id="deck_2" class="slidedeck">
    <dt>Slide 1</dt>
    <dd>Slide Content</dd>
    <dt>Slide 2</dt>
    <dd>Slide Content</dd>
    <dt>Slide 3</dt>
    <dd>Slide Content</dd>
</dl>

<script type="text/javascript">

	// Returns an array of all the SlideDecks created
	var slidedecks = $('dl.slidedeck').slidedeck();
	
	slidedecks[0];	// The first deck in the array
	slidedecks[1];	// The second deck in the array
	
	// Returns the SlideDeck object
	var deck_1 = $('#deck_1').slidedeck();
	
	deck_1;		// The single deck
	
</script>

Interact with the SlideDeck

Pass movement commands to the SlideDeck instances by referencing the variables they were assigned to.

`next()`	Move the SlideDeck to the next slide: deck_1.next(); slidedecks[0].next();
`prev()`	Move the SlideDeck to the previous slide: deck_1.prev(); slidedecks[0].prev();
`goTo(int)`	Move the SlideDeck to a specific slide, accepts an integer for which slide to go to: deck_1.gotTo(3); // Go to the third slide slidedecks[0].gotTo(2); // Go to the second slide

Callback Options (Pro Version Only}

Pro Version Feature: Optionally pass a single callback function to the interaction methods to trigger the function after animation has completed. You can also pass an object defining before and complete functions to run a function prior to animating and after animation has completed. These callbacks will be accepted by the next(), prev(), and goTo() actions.

// Pass a single function as a callback
deck_1.next(function(deck){
    alert(deck.current);  // Alert the current slide number after animating
});

deck_1.prev(function(deck){
    // Callback interactions...
});

// Pass an object with before and complete callback actions
slidedecks[0].goTo(2,{
    before: function(deck){
        alert(deck.current);  // Alert the current slide number before animating
    },
    complete: function(deck){
        alert(deck.current);  // Alert the current slide number after animating
    }
});