CSS3 image slider with stylized thumbnails
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.
12 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?