Make an accordian style slider in CSS3

View code Play Walkthrough

Description

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.
Add New Comment

41 Comments

(close)
Zulfiqar

Zulfiqar

Amazing Player. Can you tell me what is the technique you use here?

Tom

Tom

Dude, really? Watch the walkthrough….

emrah

emrah

needs a preloader.

emrah

emrah

waow i saw the player, it is wonderfull.

David

David

The pause button doesn’t seem to be working – but otherwise, this is awesome.

Gruber

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

mathconsc

Great work!
Experiencing the same subtle pixel-shift problems as @Gruber, hovever, on Safari.

Perjan

Perjan

The most amazing site for tutorials, and a perfect tutorial. Thanks

Amos

Amos

Awesome men!!!!

Dinko Skopljak

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

moslem

please add 1x speed. that would bee realy cool :)
tnx

Jeff

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

Jeff

Never mind, figured it out!

where “theme.css” is what you named the CSS File

John

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

iModDesign

Wow. nice and easy to understand. Thank you. ^^

Veera

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

Rojer

Simply amazing… Superb !!

Developer D

Developer D

Where can we see the javascript used?

Developer D

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

fayster

I also can’t get it to work in I.E. 9. Anybody been successful there?

Albert

Albert

Will the Hover tag work if this was going to be viewed on an iPad?

Nico

Nico

+1 for the 1x speed! Otherwise awesome website!

Marc

Marc

One word: awsome!

Nestor

Nestor

any one have troubles with this code in IE10?

murtaza

murtaza

Awesome work , Nice stuffs
Which scripts used?

Vik

Vik

Hey,

I am having problems with cross browser compatibility, that being IE10.

How can I make this work on IE ?

Jo Shaw

Jo Shaw

Great accordion, really good tutorial too. Thanks a lot.

I was just wondering if you could tell me how I could turn this into a vertical accordion? Or point me in the direction of another tutorial/info page.

Thanks

Jo

jecporter

jecporter

I would have added display:inline-block to .accordian. Otherwise, impressive work.

Alexandr Zibert

Alexandr Zibert

Great idea and work. I loved it. Thanks to the author.
  If you are interested. That made the vertical view.
http://yadi.sk/d/joj8xXvVF7MSD

ahmet savasman

ahmet savasman

How to integrate wordprerss I want to do?

Yahya

Yahya

That’s really cool. I implemented this walkthrough, however, I got a problem with the size and animation after applying a model popup that’s triggered when an image is clicked. Any help please?

Bhanuprakas Nayak

Bhanuprakas Nayak

Great yar….awesome

Genc Hasani

Genc Hasani

Hi,

First i wanted to say tha it is really awesome Accordion and simple, but i wanted you tu help me a little bit. I want to ask you if this hover will wor in Ipad like a click, and how can i stop the animation going back ?

Thanks alot again

Prashesh

Prashesh

nice work, I have tried to make it full screen and that I have made by modify the css. But I want to make it responsive using media query but failed. Please anyone help me to convert it into responsive?

ahmed

ahmed

I tried to make it responsive with width=100% it good but when I try to give picture’s width 100% of the li’s width i got something weird

désolé pour mon anglais, je suis francais, j’ai essayer de le rendre responsive mais l’image ne prend pas toute la place disponible on se retrouve avec un trou blanc x)

Andy Ajhis R

Andy Ajhis R

Awesome slider, thanks you so much. the code player.

andrybong

andrybong

LOVE IT!!! Thanks

5x 10x 15x 20x

41 Comments

Description