Open

API Reference

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.

NEW! You can now interact with a SlideDeck after it has been created without assigning it to a variable first. This will allow you to chain SlideDeck commands and interact with it more like you would with jQueryUI widgets.

<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

	// NEW! Interact with SlideDecks without assigning them to a variable
	$('#deck_1').slidedeck().next()

</script>

Callback Options

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
    }
});

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.
prev()

Move the SlideDeck to the previous slide
goTo(int)

Integer – Move the SlideDeck to a specific slide, accepts an integer for which slide to go to.

// Go to the third slide
$('#deck_1').slidedeck().goTo(2);
current

Integer – Get the current slide number; returns an integer of the current slide number.
pauseAutoPlay

Boolean – This parameter takes a boolean value (true/false) to pause the autoPlay feature (true) or un-pause the autoPlay feature (false).

// Get whether or not the SlideDeck autoPlay is paused
$('#deck_1').slidedeck().pauseAutoPlay		// Returns true or false

// Pause the autoPlay on a SlideDeck
$('#deck_1').slidedeck().pauseAutoPlay = true;

// Resume autoPlay on a SlideDeck
$('#deck_1').slidedeck().pauseAutoPlay = false;
updateControlTo(int)

Pro Version Feature: Integer – When the controlProgress is set to true, you can change up to which slide the user has access to. Pass an integer value to this method to enable slides up to the passed slide number.

// Enable access up to slide 4
$('#deck_1').slidedeck().updateControlTo(4)
progressTo(int)

Pro Version Feature: Integer – When the controlProgress is set to true, you can progress a user to a locked slide. This will do the same thing as the updateControlTo() method, but also move the user to the specified slide.

// Enable access up to slide 4 and go to slide 4
$('#deck_1').slidedeck().progressTo(4)
disableSlide(int)

Pro Version Feature: Integer – Disable access to a slide. If the user tries to go to that slide, they will be directed to the nearest available slide they can access (i.e. if slide 3 is disabled, trying to go to slide 3 will take them to slide 4).

$('#deck_1').slidedeck().disableSlide(3);	// Disable the third slide
enableSlide(int)

Pro Version Feature: Integer – Enable access to a slide.

$('#deck_1').slidedeck().disableSlide(3);	// Enable the third slide