Solitary CSS3 Slider (Fade Transition)

Kushagra Agarwal

• 101124
• 48
• 2

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:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room