Installation: 5 Easy Steps

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.5+, IE7+, Safari 3+, Chrome 2+, Opera 10.5+ (sorry, FF2 and FF3.0 are not supported due to lack of CSS transform support). SlideDeck will even work with some third-party libraries such as cúfon.

UPGRADING: Upgrading SlideDeck is easy, just replace your slidedeck.jquery.js file with the latest version from your download ZIP file.

1. Add the SlideDeck skin CSS file

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. Be sure to add your CSS file before your Javascript.

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

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

You may optionally include a jQuery Mouse Wheel Extension to take advantage of mouse wheel functionality for SlideDeck.

Pro Version Feature: 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.

3. Create a definition list

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 id="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>
    <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 inline immediately after the close of the <dl> tag. If you are not familiar with jQuery, please, read at least this tutorial for beginners.

<dl id="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>
    <dt>Slide 4</dt>
    <dd>Slide Content</dd>
    <dt>Slide 5</dt>
    <dd>Slide Content</dd>
</dl>
<script type="text/javascript">
	// The most basic implementation using the default options
	$('#slidedeck').slidedeck();
</script>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
    <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>

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.