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

84 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

Rick

Rick

Anybody give me an idea of how to center the images..I prefer this type of accordion gallery but I’m trying to get the images to center in the background like the YooTheme widgkit Gallery Slider example 1. I’ve tried everything..thanks, P.S. Great accordion…exactly what I want

cynicalpuss

cynicalpuss

How would I insert this into squarespace? Mostly where would I insert the styles code?

memory healer program scam

memory healer program scam

Circumstances being as it was, the young avatara decided to visit Nepal to carry on his ministry there.
The city sieges themselves, which were supposed to be one of the most epic elements of the Rv – R content, were instead
instanced zones with ~50 people per side. Yoga works on 5 principles, meditation being one of them, the other four involving right
kind of exercise, proper relaxation, proper breathing, and sufficient diet.
The hundreds of people were tested to find the human energy vibration was raised,
the energy increased. From trying to get honors, recognition, success, power, achievements to giving
my time, talents, enthusiasm to others and the world.

Rainy

Rainy

Fantastic! The codes are simple but the result is so great. Thx for sharing.

Topindiaresults

Topindiaresults

Amazing tutorial. Which player is used by you to record videos , & does any live code editor like this exists.

ilicitdragons

ilicitdragons

Hey , I’d like to have a slider that has this exact functionality implemented in a wordpress theme’s header, in which you would be able to upload new photos to be displayed directly from wordpress dashboard , could someone recommend me something regarding this ? thank you

jester

jester

hi i like this idea and it work perfect i just wonder if there is something to do to make this slider move automaticly
thnnx

Michael

Michael

Sorry I’m new here. I’m also a novice web designer, working on some templates to offer my clients.

Am I allowed use this in my design and offer it commercially? Do I pay a license fee somewhere? Otherwise, who should I credit this to?

Thanks!

Albert

Albert

Is there a way of making it auto slide perhaps?

duniakudanmu

duniakudanmu

It’s great that you aare gettiong ideas from this post as well as from our dialogue made
at this place.

parth

parth

so much use in my personal site of blog ,thank you……….:)

Elbert

Elbert

Asesoramiento y Defensa legal en materia laboral, seguridad social
y prevención de riesgos.

losing body fat but gaining weight

losing body fat but gaining weight

Remarkable issues here. I’m very happy to peer your article.
Thank you so much and I am looking ahead to touch you.
Will you please drop me a e-mail?

www.nature.com

www.nature.com

Aside from cleaning and disinfecting, you need to remove insulation, HVAC system
and other built-in furniture and gadgets to completely treat
the area. Considcer asding particular types of plants at particular
location will add life to yor home office. As a result of
ouur energy intensive lifestyles and the burning of vaset quantities
of fossil fuels the levels of greenhouse gases have been increasing rapidly which magnifies the greenhouse effect and traps more and more heat close to the earth’s surface.

https://youtu.be

https://youtu.be

I got this web site rom my friend who told me about this web page and at the moment this time I am visiting this web page and
reading very informative content at this time.

gestapo

gestapo

I have clients and associates that would find the article helpful. Is it ok to forward the article without getting into trouble? Usually the articles are sent out to the public as a newsletter or an rss feed. I am not changing it or hiding the author, simple sending and saying “this might be of interest to you.”.

simpson1083

simpson1083

It is working fine on Chrome but does not seem to work on IE11.
Any suggestions?

minimum pension in canada

minimum pension in canada

minimum pension in canada
minimum pension for nfll players
minimum pensioon for couple
minimum pension bulgaria
minimum pension bulgaria

Maybe possess energy available, perhaps aat thios particular moment a person. Retirement money mistakes could bee avoided when you insight and planning.
Do you need an extra $20K a year at age 62?

minimum pension in canada
minimum pension from super
minimum pension employer contributions
minimum pension paqyment breach
minimum pension balance
minimum pension funding requirements

kioscetakkalender

kioscetakkalender

You could certainly see your enthusiasm within the work you write.
The sector hopes for even more pasasionate writers such as you who aare not afraid to
say how tey believe. All the time go after your heart.

Margart

Margart

In the event you want a website analysis on your on-line advertising campaigns look me up.
I am always open to new ideas and method to incorporate synergetic leverage into business relationships.

Marissa

Marissa

They use both quantitative and qualitative methods to conduct business research.

The actual skill is when the employee is trained professionally to handle any situation. To enhance the
effectiveness of decision-making, companies also implement processes for conducting continuous business research.

custom postage stamps nyc

custom postage stamps nyc

Custom self-inking stamps have been in use since more than three decades and they are here to stay
for another three decades.

chat-sexe.xyz

chat-sexe.xyz

Wow, wonderful blog layout! How long have yyou been blogging
for? youu made blogging look easy. The overall glance of your site
is excellent, let alone thee content!

Nellie

Nellie

Hi my family member! I wish to say that this article is awesome, great
written and include approximately all significant infos.
I’d like to see more posts like this .

amazon

amazon

If there’s a drawback alojg with your rubber stamp, we all know which worker made the error.

Erlinda

Erlinda

Sports obtainable include tennis, soccer, racing and others, and there are events in different languages similar to Spanish as
properly.

Myles

Myles

I did discover another Lazer Tag that undoubtedly comes with the
TV connector, however that Amazon seller is charging over $370 for it.
Loopy, however hey, some people are buying it!

Www.gayandable.com

Www.gayandable.com

The restricted legal responsibility firm is a flexible from of business enterprise, blending elements of partnerships and company structures.

pro transmission glendale

pro transmission glendale

Hello, I think your blog might be having browser compatibility issues.
When I look at your website in Opera, it looks fine
but when opening in Internet Explorer, it has some overlapping.
I just wanted to give you a quick heads up! Other then that, awesome blog!

Pagarteralisbesitempa.com

Pagarteralisbesitempa.com

I do nnot know whether it’s just me or if perhaps everybody lse encountering issues
with yokur site. It appears as if some of tthe written text
on your content are running ooff the screen. Can somebody else please provide feedback
and let me know if this is happening to them as well? This could be a
problem with my browser because I’ve had this
happen before.Thank you

Beat the Boss 4 Hack Unlimited Diamonds

Beat the Boss 4 Hack Unlimited Diamonds

We go to shows out in Abacoa, the one at Foster’s Grill on Southern Boulevard
every Friday night, so I know where they are. I’d empty
half a clip into someone and it seems like only 2 or 3 bullets from them would kill
me, even when they weren’t head shots. With this the
scammer is then able to easily log into your Everquest account, take all
your valuable assets and use it for themselves.

Deca

Deca

Very great post. I just stumbled upon your weblog and wanted to say that
I’ve truly enjoyed browsing your blog posts. In any case I’ll be subscribing
in your rss feed and I’m hoping you write once more very soon!

hack de gta

hack de gta

Meilleur jeu de l’année 2013 et certainement le meilleur jeu de 2015 sur le PC!Greatest sport of 2013 and definitely
one of the best sport of 2015 on COMPUTER!

loss needs

loss needs

Having read this I thought it was really enlightening. I
appreciate you taking the time and effort to put this
content together. I once again find myself spending way too much time both reading and commenting.
But so what, it was still worthwhile!

Dustin

Dustin

Right away I am going to do my breakfast, afterward having my breakfast coming yyet again to read further news.

como conseguir dinero en gta 5

como conseguir dinero en gta 5

Just a few players discovered ways to cheat or use glitches in an effort to make millions of dollars from GTA Online races Nevertheless, utilizing these strategies could land players in hot water, even to the purpose
of getting banned by Rockstar So we won’t be sharing any of these right here.

cream pemutih

cream pemutih

Hello, just wanted tto mention, I liked this article. It was
practical. Keep on posting!

Las Vegas Realtor

Las Vegas Realtor

Appreciating the time and effort you put into your website and in depth
information you provide. It’s great to come across a blog every once in a while that isn’t the
same outdated rehashed material. Excellent read!
I’ve saved your site and I’m adding your RSS feeds to my Google
account.

MY pot doctors

MY pot doctors

Gabriel ny pot doctors helps clients people and
animals and pets. Work-out gadgets for the rest is up
to 10 minutes.

5x 10x 15x 20x

84 Comments

Description