CSS3 image slider with stylized thumbnails

View code Play Walkthrough

Description

Learn to make a fade-in-out image slider with thumbnails which have active styles. The slider does not have any page jump when you click on the thumbnails.

The markup is very simple and scalable to accomodate any number of slides without redundant and bad CSS. Javascript may be added to enhance the functionality.

Add New Comment

27 Comments

(close)
Frank

Frank

Chrome Version 19.0.1084.46

Annoying Flicker at the end of the animation

Nick

Nick

cool but ist it possible to link the images…doesn’t seem to work

moslem

moslem

realy nice. thank you. plz continue

Toby

Toby

im a beginner here
what did you name the files?
slider.html and slider.css?
i copied the code and doesnt work for me, plz help. thx

marcus

marcus

This whole site rocks!! Will you be taking open submissions?

Hector

Hector

I for some reason don’t see any of the transitions you say. the one that scales at 110% and disappears. Also, does this scale with x amount of images?
I did include the prefixfree.min.js file you said we should download.

Please help. Thanks!

ACGarre

ACGarre

Using this style of slider, how would you implement auto play? I was also wondering if it was possible to create a hover to change option?

keyvan

keyvan

Thanks, it’s freaking awesome & simple to understand!
one simple question, do you really need the javascript? if I delete the script it still works

boBak

boBak

great work with css3
its better to add some functionally to slide images automatically and pause them when hover on active image.

i know there is a way to do it with css3 animations and key frame, but that is realy a onerous work.

the question is how to get that functionality with javaScript or jQuery with some less codes?!

tnx :)

Ideup

Ideup

The worst part of this site is the comments section. Full of ignorant people.

Kyle

Kyle

How would you go about making this responsive? Not necessarily for mobile and tablet, but mainly for a browser window that has a wide range of sizes.

Steve

Steve

I have been working with the sample code provided and so far everything is working great. I tried to add a link to one of the images so it could clicked when displayed but the image gets placed near the bottom of the screen under the slide area. Not sure why. Any suggestions on how to fix the glitch?

well-wisher

well-wisher

This is awesome! This is really coding nirvana…you can actually see the code being typed out. Can’t get better than that. Hope this site takes off, it has the potential to be better than codeacademy or even udacity. Please add more tuts! This site is sex!

Iuri

Iuri

Olá, eu adorei o tutorial, e deu certo aqui em casa, eu gostaria de saber sobre legendas, se é possível colocar.

Atena

Atena

hello.
thank you and i am very happy for this site.the code player is a best method for learning.
Please teach me to move in tandem with images, CSS or JavaScript can help

Alex

Alex

There is a problem after changing window size. Active picture by default became active again after resize.

Dean

Dean

Hi there, how to make the slides start automatically?

Ganesh Dixit

Ganesh Dixit

Sir,
Its not working with the IE

Ashish patel

Ashish patel

hello word’s

Adam

Adam

How do you accommodate images of different sizes without resizing?

Rainy

Rainy

Thx for sharing.

Chris

Chris

Testing this, is there a way to make more than 1 instance of the slider on the same page? At the moment the slides from 2 appear on 1 after initial click.

Riz

Riz

Hi! i just love your creation! It’s so cooool! thumbs up!

Martin

Martin

It’s great! Thank you!
But is it possible if i want to insert a video in one of the big images? How do you code that?

Thank you very much! =)

David lewis

David lewis

If I wanted to add more images to the bottom row. How would I achieve it so that the extra labels were all on the 1 row with a scroll car instead of going to to a 2nd and 3rd row

Ernest

Ernest

what if i wish to add more images? how do i make them align in the bottom of the big picture (all horizontally) like the other thumbnails?

Ernest

Ernest

And is there a way to make it autoplay? like a slideshow of images? other than that it is really great work. I learned a lot. (Newbie here.)

5x 10x 15x 20x

27 Comments

Description