Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Tutorial 50: Creating Dynamic Sliders

A Cool Content Slider For Your Presentations

This is a javascript widget where you design a number 'panes' of content and a container for the panes. What psd2css Online will generate for you is a bunch of javascript that makes one or some of the panes visible within the slide container (as many as will fit will be made visible). The javascript by default is set to rotate through to the next pane every 5 seconds in a nice smooth animated way. You can click on a visible pane to trigger the rotation too instead of waiting the 5 seconds. You can also draw buttons to make the panes scroll left or right. All of this is available by just drawing it in Photoshop and naming the layers correctly.

The Layer Naming Conventions used for this feature are:

_slidepane - Design at least 2 of these. Design as many as you want, but if you only make one, well, then you really don't need the slider :)
_slidecontainer - Put all your _slidepanes in here.
_slideleft - (optional) You don't have to have one of these, but it's cool to allow your user to be able to scroll or page through your content by just clicking on this button.
_slideright - (optional) Same thing, just the other way.

If you have bleeding from one slide to the next a _slidepane size is off.

You also can put other psd2css content inside the panes. _text and images work great. _video works too. But some of the other javascript heavy psd2css Online features might not work so well so I'd say just try it and see what works for you.

Check the video tutorial for this one. It's cool to watch, and so much more explanatory than this documentation.

Example PSD:

Not Functioning

I have followed the tutorial, downloaded the psd file and read about it under the functions and my slider still just sits there. I feel like my javascript link is missing but I am not sure where to find this to plug it in myself. Cool and great idea but it still needs some tweaking apparently. Just wondering if someone could identify the problem and then share with everyone how to address it! Thanks

Slider in MultiPage-Design?? dosn't work propper

Hello Shaun,

first of all... the most awesome tool I ever found so far on the web.. I used it already and I will it Use for me and my customers...

I watched most of your tuts (great explained) and tryed to bring the multipage and slider thing together... most of it works and looks the way I want to... but the slider seems not to work propper within the different pages... the slideleft and slideright arrows I kicked out because they didn't work at all. the four different images are running on all pages in the background... how come? Is it because of the position or of the naming of the layers?? Or don't the two two features not work together in the way I put the pagees/pagenames? Find my screenshot hereafter:

Thanks for your help.

Greetings from germany and a Happy 2012... keep rocking and don't stopping psd2cssonline!

Doesn't Work

i followed instructions...doesn't work...

also downloaded the slider.psd file copied the slider layers into a new document and it didn't work...


Hey Shaun, nice work you've been doing here!
Im super well with this feature _slidepane but when I open the HTML the images on the slidepanes go like crazy moving fast and the buttons stop working right.
How can i fix it?

Full width slider

Is it possible to make a full width slider? If it does, how can I make it?


I followed you instructions, and couldn't get it to work. Could you please put some more instructions or anything so we can get it to work. Thank you,

copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content