The Slide

Here's a new feature that can be really cool. Build panes of content in Photoshop and use the psd2css Online _slidepane and _slidecontainer features to make a smooth javascript slide display out of them! It's a trending, sort of upper end design element in a lot of new websites and now you can get it too without having to write a line of code.

Build as many panes of content as you want. Put them all inside _slidepane layers. Then put all of that inside one _slidecontainer layer and your done. You can add arrow buttons too. Just name them in Photoshop _slideright and _slideleft. How simple is that? By default the panes will cycle through each one waiting for 5 seconds. You can modify some of the javascript (there's instructions right in the psd2css.js file about how to change the code) if you want them to wait longer or short or not cycle automatically at all, but you don't have to. The arrow buttons make the panes move. Clicking on a visible pane makes them move. But when you just let your mouse rest over a pane, it stays there - so you can read it.

The whole thing works based on a jquery plugin by the good folks over at http://flowplayer.org . There are a LOT of options you can add to the code - check out their documentation if you want to experiment. We include all the widgets for their 'scrollable' in their jquery tools.

You can add other psd2css Online features inside the _slidepanes. However beware that some of the javascript heavy features (like _menu) might not work as you expect - the slider 'hijacks' a lot of mouse events and things can get out of hand. But images and _text areas are perfect. Links work too. I even put a _video layer in a _slidepane and it worked great.

So here is the video tutorial for _slidepane and _slidecontainer - OH and I announce the psd2css Online Redesign Contest in the video too (it will look best at 720p and full screen):

You can grab the PSD that was used in that video here: slider.psd

And visit the working page from the video here: slide demo