How to Create Beautiful Content Slider Using SlideDeck

SPONSORS

How to Create Beautiful Content Slider Using SlideDeck

written by Simone D'Amico

Jun 25, 2010
tags: jQuery, web design
13 Comments

SlideDeck is a simple light (only 11kb) jQuery content slider. SlideDeck is the result of user experience of digital-telepathy that they have created for share ideas, processes and products in a clear and simple way.

SlideDeck allows you to easily organize your contents and provides a great way to draw attention to your web content while maintaining full search engine optimization. It is designed to provide understanding of a concept in less than a minute.

TN3 Gallery is a full fledged HTML based customizable jQuery photo gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.

SlideDeck

This script requires jQuery 1.3+ to run and has only been tested in XHTML 1.0 Transitional and XHTML 1.0 Strict DOCTYPEs. It is compatible with most modern browsers including FF 3.1+, IE7+, Safari 3+, Chrome 2+, Opera 10.5+ and will even work with some third-party libraries such as cúfon.

SlideDeck is available as a jQuery Slider Plugin or WordPress plugin. There are two versions for both plugins: Lite (limited) version and a Pro (feature rich, customizable) version.

jQuery Slider Plugin features

SlideDeck has several important features. The most important are:

- SEO Friendly
- Autoplay
- Slider Mode
- Full CSS Customization
- Free Minor Version Upgrades
- Unbranded
- Vertical Slides
- Touch Support
- Graphical User Interface
- Smart SlideDecks
- Slide Control Logic API
- Call Back API
- Slide Progression API

The following table summarizes the main differences between Lite and Pro version of the SlideDeck jQuery plugin:

The most important difference is the possibility of using a Vertical Slider into the script. This feature allows us to insert and to simple use another slider within each single tab.

With the PRO version you have unlimited license and you haven’t the SlideDeck brand at the bottom of the script. You can also use the Call Back APis and the Touch Support for mobile browsers.

WordPress plugin features

The WordPress plugin of SlideDeck allows us to easily use the script into our blogs/sites without needing to know JavaScript. After installing the plugin, you have a simple Graphical User Interface which you can customize the plugin and put its wherever you want. You can add your SlideDeck to a post or page using the SlideDeck button in the WYSIWYG editor or from the SlideDeck block on your edit post/page view. Or you can include it directly into your template file by grabbing the Theme Code Snippet in the Edit SlideDeck view.

Also for the WP plugin there are two versions, Lite and PRO. These are the differences:

How to create beautiful customized content slider using SlideDeck

Purpose of this post is a simple tutorial of how to create and customize a simple content slider using a PRO version of SlideDeck.

The initial situation is as follows:

Now we are going to insert the plugin in a web page and then to customize the theme of SlideDeck. The final result that we will create is the following:

The first thing to do is watching what is the code that we need to create the slider. SlideDeck uses definition-lists for each single slide. It use <dt> tags for title and <dd> tags for the slide content. This is an example:

<div id="slidedeck_frame">
 <dl class="slidedeck">
  <dt>Slide 1</dt>
  <dd>Slide content</dd>
  <dt>Slide 2</dt>
  <dd>Slide content</dd>
  <dt>Slide 3</dt>
  <dd>Slide content</dd>
  <dt>Slide 4</dt>
  <dd>Slide content</dd>
  <dt>Slide 5</dt>
  <dd>Slide content</dd>
 </dl>
</div>

If you want to use the vertical slider inside slide, you have to use a unordered-list as in the following example:

<dd>
 <ul class="slidesVertical">
    <li><p><strong>Vertical Slide 1</strong></p></li>
    <li><p><strong>Vertical Slide 2</strong></p></li>
    <li><p><strong>Vertical Slide 3</strong></p></li>
    <li><p><strong>Vertical Slide 4</strong></p></li>
 </ul>
</dd>

Before using the script, we need to include css and js files in the <head>. The simple configuration of SlideDeck needs only one simple line of code:

$('.slidedeck').slidedeck().vertical();

Now we have to customize it. First we will copy the original slidedeck.skin.css and then rename the copy in slidedeck.custom.css. We must remember to update the filename in the <head>.

The first element that we can edited is the background of SlideDeck with filename back.png. I will replace this background with an Aurora wallpaper like the Snow Leopard. The result is the following:

Now we are going to edit the html file for adding classes to the <dt> tags and putting vertical sliders with screens inside the slides. The new code:

<div id="slidedeck_frame">
 <dl>
  <dt>WebExpedition18</dt>
  <dd>
   <ul>
    <li><img src="sliders/slide1_1.jpg" alt="" /></li>
    <li><img src="sliders/slide1_2.jpg" alt="" /></li>
    <li><img src="sliders/slide1_3.jpg" alt="" /></li>
   </ul>
  </dd>
  <dt>SimoneDamico</dt>
  <dd>
   <ul>
    <li><img src="sliders/slide2_1.jpg" alt="" /></li>
    <li><img src="sliders/slide2_2.jpg" alt="" /></li>
    <li><img src="sliders/slide2_3.jpg" alt="" /></li>
   </ul>
  </dd>
  <dt>Blam</dt>
  <dd>
   <ul>
    <li><img src="sliders/slide3_1.jpg" alt="" /></li>
    <li><img src="sliders/slide3_2.jpg" alt="" /></li>
    <li><img src="sliders/slide3_3.jpg" alt="" /></li>
   </ul>
  </dd>
  <dt>SlideDeck</dt>
  <dd>
   <ul>
    <li><img src="sliders/slide4_1.jpg" alt="" /></li>
    <li><img src="sliders/slide4_2.jpg" alt="" /></li>
   </ul>
  </dd>
  <dt>Twitter</dt>
  <dd>
   <ul>
    <li><img src="sliders/slide5_1.jpg" alt="" /></li>
    <li><img src="sliders/slide5_2.jpg" alt="" /></li>
   </ul>
  </dd>
 </dl>
</div>

Next step is customize the CSS file. First thing to do is remove the padding inside vertical slider; so we can delete the following rule:

dl.slidedeck dd.slide ul.slidesVertical li {
 padding: 10px;
}

After, we can delete the background properties to the following rules:

.slidedeck dd
.slidedeck dt

and then adding a new background property to the <dd> tags using rgba():

.slidedeck dd {
  background: rgba( 255,255,255, 0.8);
}

At this point we can style the slider titles (<dt> tags) with the previous classes used in html code. Also for this rules we will using rgba() properties with following code:

.slidedeck dt.red { background: rgba( 255,0,0, 0.6); }
.slidedeck dt.blue { background: rgba( 0,0,255, 0.6); }
.slidedeck dt.violet { background: rgba( 100,0,100, 0.6); }
.slidedeck dt.orange { background: rgba( 255,70,0, 0.6); }
.slidedeck dt.green { background: rgba( 0,255,0, 0.6); }

The last step is to change the color of text inside slides. We just change it from #505050 to #fff.

.slidedeck dt .index {
 color: #fff;
}

We are finished with customizations of SlideDeck plugin. This is the final result:

You can see the plugin in action by clicking on the button below:

Take the offer

For a limited time you can get both licenses for only 129$.

Try out our free 642-642 and latest a+ dumps training courses to get high flying success in final PW0-104 & pass4sure 70-401 exams, mcat test is also very useful tool.

Authored by Simone D'Amico

Simone D'Amico is a web designer, web developer and blogger from Italy. Check out his portfolio or his personal blog. You can follow him on Twitter.

Enjoyed this story?

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

FOR FURTHER READING:

The Fashion Runway and Web Design

Typography Design Inspiration – 30 Stunning Examples

20 Websites Using Infographics

Showcase of Web Designs with Delicious Typography

Creative Examples of Headers in Web Design

Showcase of Retro Styled Website Designs

13 Comments

ADD COMMENT

nikos lianeris says:
June 26, 2010

Very good job!I found it very useful.Looking forward to using it in my projects!
designi1 says:
June 26, 2010

Great example … really good simple way to present yourself online or maybe a feature block in a web site!
Mike says:
June 26, 2010

Thanks for the instructive and useful post :) I really appreciate it.
AEXT.NET MAGAZINE says:
June 26, 2010

Nice tutorial. The example looks great!
Freelance Web Design says:
June 27, 2010

Really great tutorial! Easy and clear and it looks good! Thanks for sharing.. Will definitely use this in one of my future projects.
Rocky says:
June 27, 2010

nice tutorial… really useful :)
Simone D'Amico says:
June 27, 2010

Thank you all for comments.
I’m really glad that you find useful this post! :)
Paulo says:
June 27, 2010

I loved this plugin! Thanks for the tip.
How to make money online says:
July 1, 2010

This pligin is woth exploring. Thanks for the detailed introduction.
Rob Christianson says:
July 8, 2010

Thanks for writing this post. I have been staring at a browser tab of Slidedeck for the past few weeks and downloaded it yesterday, but have yet to implement it on my wordpress site. Im contemplating doing away with the HTML half of my site and just doing it all in WP and leveraging Slidedeck for my portfolio. We’ll see how it goes.
Justin Bowers says:
July 8, 2010

YES!!!! Thank you! I’m sure SD peeps will see this…? I’ve been upset about the level of exceptions on how the WP Plug works and how “easy” it is to customize. This is so simple, and extremely helpful. Who ever is doing this, please keep going. Donation box? PM
Larney Hunter says:
August 18, 2010

i purchased the jquery pro version but do not know where to go in order to type in the code…. i am new to jquery and don’t have a clue as to where to put the code….i am working with wordpress version in the meantime….my pro version is just sitting….can you tell me where to put the code
Isla Watson says:
September 12, 2010

mobile browsers would become greatly popular in the next few years~*;

WEBEXPEDITION18 Never Stop The Exploring