Pure CSS3 Sliders and Tutorials

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.

• TAGS:
• CSS
• CSS Transform
• CSS3
• Javascript