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

Integer – The speed in milliseconds at which the movement of each slide happens (default: 500).

scroll

Boolean – Turn mousewheel scrolling on or off (default: true).

continueScrolling

Boolean – When scrolling through vertical slides using the mouse wheel, this option will allow the deck to progress horizontally when the end of a vertical slide is reached. (default: false).

before

Function – Pass a function to run before the user has moved to a slide. This function will be run on each slide and receives the SlideDeck object as a parameter so it can be interacted with in the function.

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

Function – Pass a function to run after the user has moved to a slide. This function will be run on each slide and receives the SlideDeck object as a parameter so it can be interacted with in the function.

$('#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.

vertical().next()

Move to the next vertical slide on the current horizontal slide in your SlideDeck. If no vertical slides are found on the current slide, this just returns false.

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

Move to the previous vertical slide on the current horizontal slide in your SlideDeck. If no vertical slides are found on the current slide, this just returns false.

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

Integer – Move to a specific vertical slide, accepts an integer for the slide to go to. If no vertical slides are found on the current slide, this just returns false.

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

This method takes two arguments: v – the vertical slide number, and h – the horizontal slide number (optional). Both parameters expect an integer for the slide to go to.

If you would like to go to the 2nd vertical slide on the 3rd horizontal slide:

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

NOTE: If you tell the SlideDeck to move to a vertical slide on a different horizontal slide that you are currently viewing, the vertical slide will automatically be snapped to instead of being animated to. This is to make the vertical slide’s content immediately visible when the SlideDeck has finished animating for a seamless experience.

If you want to go to the 2nd vertical slide no matter which horizontal slide you are on:

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