Blog

SlideDeck Freebies – 3 Great SlideDeck jQuery Examples

On September 7, 201057 Comments

One of our core beliefs is that “Design Makes A Difference.” I am pleased to present a goodie basket of skins designed by the SlideDeck team for use with the SlideDeck.js Developers’ Kit. Not everyone is code savvy, so we decided to save you time and provide three easy-to-use templates showcasing SlideDeck’s capabilities. We’ve wrapped the HTML structure, CSS and JavaScript into one single HTML file for ease of use. You will find extensive comments in each document to make customizing the SlideDeck a cinch. Enjoy the demos and please give us feedback on your thoughts and what you’d like to see from us in the future. All you need to do is subscribe using the button below to claim your free download!

Subscribe to get your free skins

Let’s see these skins, then!

Gallery Slideshow

This image slider is great for showcasing beautiful photos. Include a caption or just leave the slide blank, it’s your choice. Also included is a center aligned set of bullets indicating the current slide and providing simple navigation. Each slide uses a background-image for individual photos, allowing you to insert your own HTML content.

Subscribe to download the Gallery Slideshow skin

Rotating Banner Slider

The rotating banner has become a staple feature for many websites. This example accomplishes the same functionality while providing access to the powerful SlideDeck API. Check out SlideDeck’s Usage Documentation page to view more available features.

Subscribe to download the Rotating Banner skin

Vertical Slider

Vertical slides can simplify your process. Whether it’s a step-by-step guide or an overview, you can condense your content into this easily digested format. You will also notice that scrolling is enabled for mouse wheel navigation.

Subscribe to download the Vertical Slides skin

Things to note

  • All examples require you to have a copy of the SlideDeck.js Developers’ Kit
  • If you already own the SlideDeck.js Developers’ Kit, simply include a link to the .js file in your HEAD tag. 
  • These examples were not intended to be used in conjunction with the SlideDeck for WordPress plugin.

If you have any questions or concerns, feel free to reply to this post or visit our support page for help! So, what do you think – how will you guys use these skins in your projects?

Leave a Reply

Comments (57) Responses

  1.  

    print Canvas

    We are a group of volunteers and starting a new scheme in our
    community. Your website offered us with valuable information to work
    on. You have done an impressive job and our whole community will be thankful
    to you.

  2.  

    Michael

    Cannot find a slider that accommodates vertical and horizontal content management, as in your previous Pro version in Slidedeck 2.1. Please advice.

  3.  

    Michael

    Where can I safely download Slidedeck Pro for word press ? Does Slidedeck Pro include the vertical and horizontal slider, and promoted in the lite version?

    Thanks

  4.  

    raj

    Geat gallery slideshow code thank for demo and shared.

  5.  

    Drew

    Hi and thanks for this post!

    I’m wondering how to adjust the delay time between slides? Thanks very much. 🙂

    Drew

  6.  

    barbara

    It’s been mentioned that these skins may be ported over to the WordPress plugin. Any idea if that is still planned? Or, if not, can you point me towards instructions as to how to do it myself?

    •  

      Jason

      Hi Barbara

      Unfortunately, that’s not something we’re focusing on right now, and integrating them into WordPress would be a pretty complex undertaking. If it’s the vertical stacked nav skin you’re after, however, you can find something very similar included by default with the latest version of SlideDeck PRO, named “Vertical Stacked Nav”.

      Hope that helps!

      Jason

  7.  

    Mako

    Geat gallery slideshow code thank for demo and shared.

  8.  

    Steve Robertson

    The top examples is exactly what I want in WordPress. I have gotten this to work as straight HTML but can’t get it to work with WordPress and my ProPhotoBlogs theme. This is the main reason that I purchased SlideDeck and feel a little mislead that it is not supported yet. In fact, given that this is in high demand and people asked for this over a year ago, why is it not supported in WordPress yet and when can we expect it to be supported?

  9.  

    Aaron Harrington

    Is there a way to do vertical slides like the standard horizontal slider, in that the tabs move instead of being on the side?
    Also, is there anyway to insert my own images as the tabs instead of just text?
    By the way I’m using wordpress.
    Thanks,
    Aaron

    •  

      Jamie

      Is there a way to do vertical slides like the standard horizontal slider, in that the tabs move instead of being on the side?

      Hi Aaron,
      Although a vertical accordion style deck is something that some people want, it’s not something that we plan on creating. jQuery UI has also already created one.

      Also, is there anyway to insert my own images as the tabs instead of just text?
      By the way I’m using wordpress.

      You can insert your own images as the click-able navigation, but you would have to do so manually using CSS.

  10.  

    David

    Hello! I’m implementing the Gallery Slideshow on my site, and I’m a PRO user. However, I noticed there is a small glitch… When you let the gallery play without using the nav buttons, the PREV button doesn’t get enabled until you click the next button or use the nav dots. Is there a fix for this?

    •  

      Jamie

      Hi David,
      Thanks for reporting this. We’ll look into it and be sure to address this in the next release.
      Could you provide us with an example of the bug? It would speed up the time it would take us to re-create it.

    •  

      Benedikt

      Hi Jamie,

      also trying to workaround/fix the bug that David reported.
      The example of the bug would be in your own Gallery Slideshow example: http://slidedeck.com/demo/gallery.html
      Steps to reproduce: Wait until Autoplay starts and the next slide is displayed. Hover over the image to display the galleryArrows, the back arrow didn’t get updated and is still disabled.
      HTH

  11.  

    Daniel

    ah scratch that I should have read the comments a bit closer..

  12.  

    Daniel

    Hi , the top gallery slideshow is perfect for what I want however I can’t seem to get this function properly when implementing multiple slideshows on one page. I can see a possible way to do this but it requires duplicating lots of javascript and changing the respective tag names. Is their a more straightforward way of doing this?

    Thanks

  13.  

    T

    Hi, I am a newbie to all of this, so apologies if this is an obvious. Is there a way to create an individual link from each gallery image to a web page, for the situation where I can specify more details relating to that image? The last line of the gallery explanation says ” allowing you to insert your own HTML content” however, apart from changing the reference to the image, where do you place your referrer (a href=””) to the html page belonging to each of your pictures? Thank you

    •  

      Dave

      Hi T, because we are displaying the image in each slide using the CSS background-image property, there isn’t anything that is easily linkable in the slide area. Your best bet is to link the title in the caption area. If you want to get your hands a little dirty though and start messing with some slightly advanced CSS, you could also consider placing an A tag in the DD tag of the slide you want to link. You could then use CSS to make the tag take up the entire area of the the slide itself, making the entire slide area linkable. If you need some help getting something like this setup, please do some searching on our support forums at http://www.slidedeck.com/support/. If you cannot find anything for this, please go ahead and create a new topic by clicking the “Create Topic” button at the bottom of your search results or post directly at http://support.slidedeck.com/. Please make sure that if you post you specify which version of SlideDeck you are posting for help with.

  14.  

    Dave

    I am VERY upset that a skin for the vertical slider shown in example 3 above is NOT in the wordpress plugin. I consider this to be deceptive advertising. I upgraded to pro expecting to be able to use this feature but discover it requires extensive hacking which I am not capable of.

    •  

      Dave

      Hi Dave, I’m sorry that this confused you, but this post was written specifically to the jQuery version of SlideDeck, not the WordPress plugin. We are working on making these skins as available as available as possible across both the jQuery JavaScript library and the WordPress plugin, but now all are doable in the user interface for the WordPress plugin.

  15.  

    Manuel

    On your live galery example, the dots at the bottom change with the autoplay feature, however, when i download and use the slidedeck free version as the .js the dots dont work. they only work when you use the nav nuttons. is there a reason for this? and how can i fix it?

    •  

      John

      Hi Manuel – the example SlideDeck takes advantage of the PRO libraries Callback API option complete. This is not available in the LITE version. An option you might consider is to create a listener, i.e. setInterval() that checks for the active state of your SlideDeck’s DD and then updates the nav element when the DD’s active state changes. This is not really optimal, but can get the job done. An adaptation of the example script would need to be made. Otherwise an upgrade to PRO would easily solve this for you. If you have any further questions, please post to our support forum http://support.slidedeck.com

  16. Pingback: Using SlideDeck with a Modal or Lightbox | SlideDeck Web Slider

  17.  

    Jiro

    Hi again Jami.

    Just to clarify the only issue is that the horizontal gallery starts with slide image 2 and then repeats image 4.

    It starts with “/photo-gallery/gallery-photo_02.jpg” instead of”/photo-gallery/gallery-photo_01.jpg”

    I think it’s something about how the 2 installs are interacting with each other…

    Any suggestions? or should I post over at the forum?

    Thanks for all your help!

    •  

      Jiro

      Finally figured it out….

      it worked to start with “dl.slideshow dd.slide_2{” (instead of 1… and to have dd.slide_2 point to the first image and so on.

      Thanks again!

  18.  

    Jiro

    Thanks Jamie! You got be pointed in the right direction and I’m really close, but….

    The there is a problem with the horizontal “gallery slideshow” slidedeck (which is in the first slide of the “vertical slider” slidedeck).

    The problem is that the “gallery slideshow” displays Slide#2 as the first slide and displays the final slide #4 twice. It starts with the second slide and shows a duplicate of the final slide (#4). The captions work correctly.

    Any idea how to fix this?
    http://www.rpi.edu/~rootj2/eng.test/jiro.slidedeck.html

    Thanks!

    •  

      Jamie

      Hi Jiro,
      Based on the code you provided, everything seems to be working well. It looks like you have four horizontal slides in the first vertical slide, and the third horizontal slide is without a caption. other than that, everything looks and works as it should.

      If you continue to have issues with the setup, feel free to post a thread over at our support forum and we can better focus on resolving this for you.
      http://support.slidedeck.com/slidedeck

  19.  

    Jiro

    The “vertical slider” is just what I was looking for… What would be the best way to add horizontal navigation to one of the slides (for example adding the “gallery slideshow” to the first slide in the “vertical slider” implementation?)

    •  

      Jamie

      You’d do it exactly as you describe, you’re on the right track.
      Place a horizontal deck into the first vertical slide and instantiate them separately as Dairien and Pete are discussing above. Make sure to place all your JavaScript after both decks though. You don’t want any JavaScript inside the HTML markup of the first vertical slide.

  20.  

    Pete

    Hello,
    Is there any way to get more than one Gallery Slideshow to work on a single page?
    Looks nice.
    Thanks,
    Pete

    •  

      Jamie

      Sure, as long as the galleries have unique ids and the decks are instantiated individually.

    •  

      Pete

      Thanks for the reply.

      I’m a bit stuck with this, could you elaborate on that? I’m not sure what you mean by “the decks are instantiated individually”.

      Would you mind having a look at this:

      http://sbx.me/pete/SlideDeck_gallery-example/gallery.html

      Any suggestions will be gratefully received.

      Thanks again

    •  

      Dairien

      Hello Pete,

      You’re on the right track. You are already instantiating the SlideDecks correctly by creating two separate objects that hold the necessary components. One small mistake is that you are naming the SlideDeckAssistant variable twice, instead of SlideDeckAssistant1 and SlideDeckAssistant2. Essentially, you are overwriting the first SlideDeck, this is why only the second SlideDeck works properly.

    •  

      Pete

      Hello again,

      Thanks for the tip. Unfortunately I still seem to be getting something wrong.

      I’ve set the up the download example to have two Slidedecks and although I now have navigation for each one they both control only the lower deck.

      This example is available at the same url:

      http://sbx.me/pete/SlideDeck_gallery-example/gallery.html

      Sorry to hassle you!

      Thanks,

      Pete

    •  

      Dairien

      Pete,

      You are declaring “myDeck” twice:

      var myDeck = …..

      I suggest making this variable unqiue as well. myDeck1 and myDeck2.

    •  

      Pete

      Aha!

      Thanks VERY much.

      Great stuff

  21.  

    Troy Templeman

    Hi, is the Gallery Slideshow supposed to work with the WordPress Lite plugin? I just tried but it doesn’t show up in the SlideDeck Skin drop down box. It seems the stylesheet is missing from the download files. Thanks

    •  

      John

      Hi Troy – These examples were created using the standalone SlideDeck JavaScript library and were not intended to be used in conjunction with the SlideDeck for WordPress plugin.

      Cheers!

  22.  

    Eric Gonzalez

    Hi There,
    I purchased the pro version today after tinkering with the free version. I am in the process of redesigning our website in WP. I purchased the upgrade because of the vertical slide option. I am trying to create a vertical slide deck with horizontal slide title similar to one of the examples in this post and the other example used by Opencandy. Is it possible in WP?
    Thanks
    Eric

    •  

      Dave

      Hi Eric, the Opencandy SlideDeck was built using the JavaScript version of SlideDeck. While it is indeed possible to make a skin for the WordPress plugin with similar capabilities and layout, it will require extra programming and knowledge of HTML, CSS and JavaScript to do so.

  23.  

    Chuck

    The Vertical Auto Play feature is now live with the new version of SlideDeck Pro for WordPress

  24.  

    d

    Thanks, the Vertical Slider is exactly what we were trying to pull of for our latest client.

  25.  

    Chris

    Nice. Very nice. Will be trying this myself!

  26.  

    mike i

    I love the vertical one, I could use this on a lot of my clients websites. The problem is that there is no autoplay. That’s the first question EVERYONE asks for when they see it. I know you’ve mentioned it “might” be added in the future. Any update on this? I’ll purchase the pro version as soon as that feature is added.

  27.  

    Dairien

    Hello midsummer,

    I am sorry for the confusion. You are correct in noting that the vertical slide example requires a pro license of SlideDeck, however, both the gallery and the rotating banner examples can be accomplished with SlideDeck Lite. The term “freebies” refers to the code snippets that we have provided.

    Again, I am sorry for the confusion, we certainly appreciate you and your friends support of SlideDeck. You have the opportunity to win a free copy of SlideDeck Pro during our SlideDeck Giveaway contest on Twitter.

    If you are not familiar with the contest, check out this link:
    http://www.slidedeck.com/blog/slidedeckpro-twitter-giveaway/

    Dairien

  28.  

    midsummer

    I love SlideDeck, unfortunately I can only afford a free one. Have helped friends set it up on their sites too (4 now!) but I was wondering why the title was a bit misleading… Freebies for the PRO version, not just plain old freebies. But great help for coding if you have the PRO.

  29.  

    Tony Lancaster

    I like them very much, especially the vertical slider – but my comment is WHY are these not available for WordPress?

    •  

      Dairien

      Tony,

      The examples were created within a short time frame. We felt that the demonstrations would be beneficial to SlideDeck users. Implementing these examples with WordPress would take signficantly more time, but that doesn’t mean that we won’t do so in the future.

      If you visit our support section (http://support.slidedeck.com/slidedeck), you will notice that you can submit an idea. It would be great for you to submit this idea so we can see if the rest of the community feels the same way.

      Thank you for taking interest in our demonstrations and SlideDeck. We are greatly appreciative.

      Dairien

    •  

      marja

      Hi There,

      I need the Vertical Slider example for a customer site using wordpress pro version of your plugin.
      I asume I will need to make a custom skin for this, but would like a few pointers if possible, to get me into the right direction.