Support Help, Documentation & Customization

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.

Currently our supported browsers are FF 3.6 and newer, Internet Explorer (IE) version 8 and newer, Safari 4 and newer, Google Chrome (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.

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.

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.

<div id="slidedeck_frame" class="skin-slidedeck">
    <dl 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>
        <dt>Slide 4</dt>
        <dd>Slide Content</dd>
        <dt>Slide 5</dt>
        <dd>Slide Content</dd>
    </dl>
</div>

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.

<div id="slidedeck_frame" class="skin-slidedeck">
    <dl 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>
        <dt>Slide 4</dt>
        <dd>Slide Content</dd>
        <dt>Slide 5</dt>
        <dd>Slide Content</dd>
    </dl>
</div>
<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 jQuery Slider</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.

New version released with support for Parallax and Ken Burns effect Buy It Now
Hello. Add your message here.