Ajax Loader
×

Solitary CSS3 Slider (Fade Transition)

I made this very cool slider using just CSS3 (Not a single line of JS or jQuery is used in this slider). 

It uses :target pseudo class to select the current image to be displayed. The ids on images are same as the href of the links so when a link (or navigation button) is clicked, the image corresponding to it will be displayed with a fade animation.

You can use it for free in your websites or play with the code as much you like. However, this slider won't work in Internet Explorer 8 and below. It will work in IE9 but without transition effects.

Also, there's a limitation in this slider that only 5 slides can be used at this time. (You'll have to edit the CSS code if you want to include or remove one or more images from the slider) 

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

2 Comments

× New

Sign In to comment

Rishabh :

If you wanna do with pure CSS then use keyframes (CSS3 Animations). With JS, use setTimeout or setInterval!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+