Open

Vertical Slides

Pro Version Feature: New to SlideDeck Pro, vertical slides allow you to navigate both horizontally across slides and vertically within a slide. See slide 2 of the WordPress Plugin 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>

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, as demonstrated on the WordPress Plugin page’s SlideDeck.

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 links (the dark arrow behind the iconic navigation elements in the WordPress Plugin page’s SlideDeck).

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

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