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

21 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.

5x 10x 15x 20x

21 Comments

Description