Support Help, Documentation & Customization

Vertical Slides

New to SlideDeck Pro, vertical slides allow you to navigate both horizontally across slides and vertically within a slide. See slide 2 of the Home page SlideDeck for an example of how this interaction can work.

To setup vertical slides in your SlideDeck is pretty straight-forward. Just add a <ul class="slidesVertical"> element to your slide’s content. Each <li> in this element will contain the content for that vertical slide. Navigation will automatically be created for you.

Start with code similar to this:

<dl id="my_slidedeck" class="slidedeck">
    <dt>Slide 1</dt>
    <dd>
        <ul class="slidesVertical">
            <li><p>Vertical Slide 1</p></li>
            <li><p>Vertical Slide 2</p></li>
            <li><p>Vertical Slide 3</p></li>
            <li><p>Vertical Slide 4</p></li>
        </ul>
    </dd>
    <dt>Slide 2</dt>
    <dd>Slide Content</dd>
    <dt>Slide 3</dt>
    <dd>Slide Content</dd>
</dl>

<script type="text/javascript">

    // Setup a SlideDeck with the <dl id="my_slidedeck"> element
    // and create the vertical slide navigation on the slides.
    $('#my_slidedeck').slidedeck().vertical();

</script>

New to 1.2.5 – You can also use a <dl> structure for your vertical slides with version 1.2.5.  The title text in the <dt> elements is used for the automatically generate nav element text. It looks something like this:

<dl id="my_slidedeck" class="slidedeck">
    <dt>Slide 1</dt>
    <dd>
        <dl class="slidesVertical">
            <dt>Vertical Slide 1 Title</dt>
            <dd>Vertical Slide 1 Content</dd>
            <dt>Vertical Slide 2 Title</dt>
            <dd>Vertical Slide 2 Content</dd>
            <dt>Vertical Slide 3 Title</dt>
            <dd>Vertical Slide 3 Content</dd>
        </dl>
    </dd>
    <dt>Slide 2</dt>
    <dd>Slide Content</dd>
    <dt>Slide 3</dt>
    <dd>Slide Content</dd>
</dl>

<script type="text/javascript">

    // Setup a SlideDeck with the <dl id="my_slidedeck"> element
    // and create the vertical slide navigation on the slides.
    $('#my_slidedeck').slidedeck().vertical();

</script>

You must run the .vertical(); command on your initiated SlideDeck to enable the vertical navigation. Just make sure that the <ul> tag that you want to be a vertical SlideDeck has the slidesVertical class for it to be picked up and converted.

Navigation will be automatically created

After you have run the .vertical(); command, a new element will be added to each slide that contains a set of vertical slides. This element is added to navigate through the vertical slides and has a markup that will look like this:

<ul class="verticalSlideNav">
    <li class="nav_1 active">
        <a href="#1">Nav 1</a>
    </li>
    <li class="nav_2">
        <a href="#2">Nav 2</a>
    </li>
    <li class="nav_3">
        <a href="#3">Nav 3</a>
    </li>
    <li class="nav_4">
        <a href="#4">Nav 4</a>
    </li>
    <li class="arrow"> </li>
</ul>

Each <li> in this list element will house a link that will navigate to the appropriate slide. These can easily be replaced with images using the CSS image replacement method. If using the <dl> structure, the content of your <dt> is used as your link text, instead of Nav1, Nav2, Nav3, etc.

The <li>&nbsp;</li> element at the bottom of this list will be an indicator of the current slide that will animate behind the individual navigation link.

Vertical slide installation options

Just like the horizontal SlideDeck, you can pass options to the vertical slides when you create them. For example:

$('#my_slidedeck').slidedeck().vertical({
    speed: 250,    // Set the animation speed to 250 milliseconds
    scroll: true   // Allow mousewheel scrolling
});

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

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

Interact with your vertical slides

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

// Go to the next vertical slide on the current horizontal slide
$('#my_slidedeck').slidedeck().vertical().next();

// Go to the previous vertical slide on the current horizontal slide
$('#my_slidedeck').slidedeck().vertical().prev();

// Go to the third vertical slide on the current horizontal slide
$('#my_slidedeck').slidedeck().vertical().goTo(3);

$('#my_slidedeck').slidedeck().goToVertical(2,3);

$('#my_slidedeck').slidedeck().goToVertical(2);