Sunday, 4 March 2012

Pure CSS Slideshow

I've been looking for a way to create an image slideshow for my website to show recent work. Usually, JavaScript is used to make it but since I'm still learning HTML and CSS, I wanted to see if there was a way to use just that to get a similar effect.

There are actually quite a lot of different versions out there, some pretty impressive, but I was looking for a simple slideshow with clear instructions and ended up using this one below tweaking a few things to suit my website.

The obvious things I changed were the images, the button colours, the size of the slider, font, text, and various other things. I also added a link to enable the image to change to the next one when clicked on. There were a few things I would have added but after fiddling around for ages and getting no result, I'm going to live without the extras.

But I am very pleased I found this slider as I would have never been able to create it from scratch! (Not now at least.)


CSS Designers said...

Its a nice post, and the kind of information you have provided here is really great.

Tiffany Ong said...

Thanks. I hope others would find it as useful as I did.