View code
Play Walkthrough
An accordian slider(hover based) made in CSS3 using very less code. No Javascript used. The markup and the CSS logic are very simple.
This slider is scalable to any number of images and can be easily used in websites.
A very functional piece, not just fashion.
28 Comments
(close)Zulfiqar
Amazing Player. Can you tell me what is the technique you use here?
Tom
Dude, really? Watch the walkthrough….
emrah
needs a preloader.
emrah
waow i saw the player, it is wonderfull.
David
The pause button doesn’t seem to be working – but otherwise, this is awesome.
Gruber
simple and great! still i notice a weird 1px shifting while hovering on the slider’s lis; i’m sort of heartened ’cause i’ve been experiencing this kind of weird shifting in a similar effect i applied for a hovering drop-down menu, and i thought it was due to a bad code issue. I see this shifting only in chrome, ffox is ok, anyone experiencing the same thing?
mathconsc
Great work!
Experiencing the same subtle pixel-shift problems as @Gruber, hovever, on Safari.
Perjan
The most amazing site for tutorials, and a perfect tutorial. Thanks
Amos
Awesome men!!!!
Christopher David Elison
Very nice indeed :) Love the site too!
Dinko Skopljak
hi, why´s there some-20px margin/padding on the top????? i tried this on my website, had to go for – value… how do i make it go from right to left??? thx
p.s. great stuff here :-)
moslem
please add 1x speed. that would bee realy cool :)
tnx
Jeff
How would I link the HTML and CSS?
I have both files saved in a folder on my Desktop and I would like to view the accordion locally.
Jeff
Never mind, figured it out!
where “theme.css” is what you named the CSS File
Jeff
It won’t let me post code so here is the think to what I am talking about:
http://www.w3schools.com/tags/tag_link.asp
John
So I must be dense because I can get this to work perfectly in Chrome, Firefox, and Safari, but Internet Explorer just displays the first photo. GAH!
iModDesign
Wow. nice and easy to understand. Thank you. ^^
amul
so awesome!
Veera
I was kinda expecting some really long CSS. Can’t believe it was this simple!
This site is an absolute gem of a tutorial site. Keep up the great work.
Rojer
Simply amazing… Superb !!
christine joy
its awesome……..
Developer D
Where can we see the javascript used?
Developer D
I managed to get it, but the slider is not stretched vertically. its got each individual image positioned on top? anyone else run into this problem?
fayster
I also can’t get it to work in I.E. 9. Anybody been successful there?
Albert
Will the Hover tag work if this was going to be viewed on an iPad?
Nico
+1 for the 1x speed! Otherwise awesome website!
Marc
One word: awsome!
Nestor
any one have troubles with this code in IE10?