Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

Extending SlideDeck – Part 1: Controlling The Deck

SlideDeck is an awesome tool for displaying information on a web page, but there are times when you might want to exercise additional control over your deck. Our lead developer Dave has done a great job with the more technical side of SlideDeck by providing hooks that allow you to control the behavior of the decks on the page. In my next few posts, I’ll be outlining some of the cool tricks that can be done using SlideDeck’s built in controls and some auxiliary jQuery code.

Controlling Your SlideDecks

The main three functions that control SlideDeck are the “prev”, “next” and “goTo” commands. These functions allow you to add external controls to your SlideDeck, and command the deck to reveal a specific page of information on your command.

Typically when initializing your SlideDeck, you’ll run a command like this:

$('#slidedeck').slidedeck();

That’s fine for a default implementation, but if we need to access the properties of a deck once it has been created, we’ll need to store it in a variable for later. The easiest way to do this is to create a variable when creating the SlideDeck and assign the deck to the variable in one fell swoop!

var myDeck = $('#slidedeck').slidedeck();

Once the SlideDeck has been shoved into the ‘myDeck’ variable, we can pass commands to it. Writing some simple JavaScript that sends commands to ‘myDeck’ or asks it for information (such as the index of the current slide) is extremely simple and powerful.

I’ve put together a simple example page that shows how you can add Previous and Next buttons to a regular SlideDeck. In this example I have also added a command that will take you straight to a slide based on a clickable link.

Previous/Next Slide Buttons

The Previous/Next slide buttons are simply <span> elements in my example, but they could be images, links or even standard HTML buttons. I started by creating a DOM ready function in jQuery (This makes sure that the page has done its stuff before we do ours.) and adding a click event to each of the spans. When using jQuery, you do that like this:

$('#navigation .prev').click(function(event){
// Stuff to do when "Prev" is clicked.
myDeck.prev();
});
$('#navigation .next').click(function(event){
// Stuff to do when "Next" is clicked.
myDeck.next();
});

Note that we are invoking the prev() and next() methods of the myDeck variable (Which now has access to all of the options that a SlideDeck has.) This would not have done anything if we had not assigned the SlideDeck to “myDeck” in the previous section.

Just like that, your SlideDeck can be controlled by other elements on the page! These buttons could even be inside of each slide, creating a more familiar user experience for those who are used to clicking “Next” when they are done reading. The Algebraix Data SlideDeck uses this method.

Going To a Specific Slide Number

You’ll notice on the example page above that I’ve got two other links below the Prev/Next buttons. These are specially formed links that allow the deck to be commanded to instantly open that particular slide. Creating this interaction is a bit more complicated, but the concept is similar. To get started, we’ll need to create some HTML for the links to live in:

These links have a class of ‘goToSlide’ and that will allow us to target them. They also have a href value of ‘#[and the slide number we want them to go to]’. The challenge here is two fold: we need to get the links that are responsible for handling SlideDeck “goTo navigation” and then figure out what slide they should go to.

The first step is to grab the links that have the ‘goToSlide’ class and make them clickable, while ignoring the fact that they are a link and their default behavior is to take you somewhere:

$('a.goToSlide').click(function(event){
// ignore the tag's default behavior
event.preventDefault();
// Code to be executed when the link is clicked.
});

Then we need to add the goTo() command along with the index of the slide we would like to go to passed inside of the parentheses. To accomplish this, we use a regular expression or ‘Regex’ to take the link and strip away everything except the number at the end. The Regex below (which is part of a text replacement function) basically says “Find any character up to the ‘#’ symbol and replace it with nothing”. This logic will strip the link’s href value and leave just the slide number we are interested in.

The Significance Of All This

Although SlideDeck’s default interface of vertical spines is very intuitive and easy to use, there are a few users who would like to eliminate them altogether. We’ve added a new option to SlideDeck Pro in the latest release that adds the ‘hideSpines’ option and once the spines are gone, the above options become a great convenience and a bit of a necessity as well.

Featured Posts

Do you want to showcase your WordPress custom posts in the slider of your website? A WordPress post slider will not improve traffic for your blog posts, but will also improve the visitor engagement with...

Showcasing images from any Pinterest account was never so easy. SlideDeck3 gives you the ability to create a dynamic Pinterest slider in WordPress in just 30 seconds. Also, enables you to allow visitors to pin your slider’s...

Instagram is one of the most popular social media platforms today. How about if you could showcase your favorite Instagram photos into the slider of your WordPress site? While there are many WordPress plugins available,...

Do you want to boost your sales ? Sliders can be used for marketing and highlighting the hot products on your site. Using the WooCommerce Product Slider to showcase your hot products is an efficient...

Do you want to quickly create image/video/text/HTML slides in WordPress? SlideDeck3 allow you to mix a variety of slide types into a single presentation such as photos, videos, text and HTML documents to create a...

Do you want to add a Zenfolio Gallery slider to your website? You can easily import the gallery images from your Zenfolio account and create a beautiful responsive slider for your WordPress site using SlideDeck3....

Comments
(25) Responses

Ken

So far i’ve figured out little on how to use the custom CSS and have the basic design of what i’d like. I’m trying to get a post slider that shows an image in the left 35% of the deck and the caption filling the other 65% of the slide. I’ve achieved 50/50 caption/image using:

James

“These buttons could even be inside of each slide, creating a more familiar user experience for those who are used to clicking “Next” when they are done reading. The Algebraix Data SlideDeck uses this method.”

This link to the Algebraix page is not leading to a current page. I would like to know more about buttons inside of slides. Do you have anything else on that?

Jason

Shan Bahadur Khan

Hi,
Its very nice menu bar option to use on website.
I have just a small questions that if i dont want to active the “CLICK” option on all decks, is it possible ?. For example if mouseover to Deck1, it should open the correspondence slide instead if click on it and then it would open.

max hodges

Jamie

Hey Max,
This can be a bit trickier to get working in WordPress. Since a blog comment thread isn’t the best place for this type of discussion, let’s move it over to the support forum. http://support.slidedeck.com

Jamie

Hi Adam,
We can’t tell much without seeing your code, but the myDeck part is important. The real trick happens in code samples #1 and #2 in the post. Where we assign the deck to a variable so we can run commands on it later. The best thing to do is to download the example file to your computer and try it out there.

For further discussion/help the Support Forum is really the best place to get a conversation going.

Jamie Hamel-Smith

Questions and bug reports tend to get lost in the comments of these posts and if the question is posted in the forum, it’s more likely to get the attention it deserves.

Cassandra & Henrique:
For now, this tutorial is really intended for use on the standard version of SlideDeck. The WordPress Plugin version is not an idea environment for adding these sorts of code-extensions, but we do have plans to improve this in the future.

Henrique

I have the same issue as Carsten: SlideDeck expands my pages up to 10.000 px! I wonder if the Pro version also has this problem. And I’d apreciate to know if there is a (rather simple) way of building a slide controler into a wordpress page. I’d need that. Can it be done? Are you working on it? Shall I wait? Thanks a lot!

Carsten

I will try this out and see how it goes, but sofar thank you for the response.

Now that I am already here I have another question.

It is my experience that the tiny Icon that is found in the freeware version creates a problem in the css, in such sense that it expands the actual page in the vertical axis.
When it does this is positions it self at the very bottom of my page.

I have no link for yoy to see this but will try to provide this during the upcoming week.

Jamie Hamel-Smith

Hi Carsten & Cassandra,
I appreciate the feedback and I’ll try to help as best as I can.

Carsten,
What you need is the start slide option. When creating a SlideDeck, there are several options you can pass into the command to alter the behavior of the deck. What it sounds like you need is for your SlideDeck to start on slide #4 when your visitors get to the second page of your site. The documentation to do this is located here: http://www.slidedeck.com/usage-documentation#usage_available_options
Third down in the list is the start parameter. You can pass {start: 4} to the slidedeck function to have your deck start on slide #4.

Cassandra,
To add the previous and next buttons does require some knowledge of code, and there’s a link to a working example here: http://www.slidedeck.com/demo/deck_control.html
If you view the source of the code on that page, everything you need is right there. The necessary code to make this work exists from line 71 to line 89 in the example. For WordPress however, we have not yet created a way to do this.