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.
27 Comments
Description
27 Comments
(close)Frank
Chrome Version 19.0.1084.46
Annoying Flicker at the end of the animation
Nick
cool but ist it possible to link the images…doesn’t seem to work
moslem
realy nice. thank you. plz continue
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
This whole site rocks!! Will you be taking open submissions?
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
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
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
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
The worst part of this site is the comments section. Full of ignorant people.
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
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
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
Olá, eu adorei o tutorial, e deu certo aqui em casa, eu gostaria de saber sobre legendas, se é possível colocar.
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
There is a problem after changing window size. Active picture by default became active again after resize.
Dean
Hi there, how to make the slides start automatically?
Ganesh Dixit
Sir,
Its not working with the IE
Ashish patel
hello word’s
Adam
How do you accommodate images of different sizes without resizing?
Rainy
Thx for sharing.
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
Hi! i just love your creation! It’s so cooool! thumbs up!
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
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
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
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.)