Web Development

Pure CSS3 Sliders and Tutorials

Written by Kevin Liew on 05 Jun 2013
124,023 Views • Shares
3 comments

CSS3 has made an impact on the web industry. With its support of transitions, 3D transform and new pseudo class, it's possible to create a pure CSS slider without a single line of Javascript.

You have to use the latest browsers to be able to enjoy this. It won't work unless your browser supports all those latest features of CSS3. However, we have WOW Slider which support both Javascript and Pure CSS slider on either old or modern browsers.

 

WOW Slider

WOW Slider is a responsive jQuery image slider with amazing visual effects. When Javascript is not supported, it will have a pure CSS fallback, thus it's listed in this post as well.

 

Gallery CSS

A free pure css3 gallery, however if you want to learn how it's made, you can buy the screen cast which covers the whole development process.

 

Pure CSS Cycling Slideshow

A detailed tutorial from Smashing Magazine, they discuss how to create an infinitely looping slider of images using only CSS3 animation.

 

Solitary CSS3 Slider with rotation transition

A pure CSS3 slider I found from cssdeck. The transition effect is quite fancy.

 

Simple Auto Playing Slideshow

A quick and simple CSS slider from CSS-Trick.

 

Pure CSS Featured Image Slider

A tutorial by Joshua Hibbert.

 

CSS3 Image Slider

A tutorial by Simon Picos, hosted in CSSDesk also.

 

Learn how to use Target CSS

Instead of blindly following someone else's code, you can learn how to utilize :target to create a slider with Joshua Johnson's tutorial

 

Responsive Slider CSS3

A responsive CSS3 slider, with a little bit help from Javascript.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

3 comments
Pavel Podlipensky 3 years ago
Wow! What a collection of pure CSS sliders! Thanks for sharing. I'm a big fan of pure CSS hacks. Here is pure CSS image loading on demand hack: http://podlipensky.com/2013/06/css-only-load-images-on-demand/
Reply
Sumon 3 years ago
Great! Here, I want to share a different works "click-able image slider" that is done by pure css(level 2) and even that is run in Internet Explorer 6. The link is below......

<a href="http://myglobeweb.blogspot.com/p/blog-page_9026.html" rel="nofollow" >http://myglobeweb.blogspot.com/p/blog-page_9026.html"
Reply
La Casita Del Cuco 2 years ago
I have been to much focussing on Javascript animation while CSS3 animation always was there in font of me. Great collection of tips and tricks you shared with us Kevin. Let see if I can find what I am looking for when I will try out and experiment with a few of them.
Reply