CSS Slideshows

It’s about time. Now it is possible to make pure CSS Slideshows for your web site. You can make basic small image CSS Slideshows, full screen width  Slideshows, or even partial page CSS Slideshows.

Oh, I forgot to tell you the best part. These are purely Responsive Slideshows, so when you create your lovely images and use the code, they will show up well on a big screen monitor or on a tiny little iPhone.

In this video you will see the  Slideshows that I have created. I have created two types. One of my  Slideshows swipes from one image to the next with the images moving from left to right. When you hit the last slide, all of the images “swish” before your eyes back to the original slide.

I added some other goodies to my  Slideshows. At the lower left hand side of all images, you will see text descriptions in a box. These descriptions fade in and out as you go from slide to slide. Another addition are the little buttons you see at that very bottom of the page so that you can click and go from one slide to the next.

I have made each of the  Slideshows downloadable so that you can plug in your own images and change the text descriptions at the bottom of the page. You can also replace the “hover” image that shows up when you hover over the buttons at the bottom of the page to go from slide to slide.

CSS Slideshows Challenges

These CSS Slideshows work well, but it seems that the one that fades and moves works in all modern browsers except for Opera. Opera fades the images, but does not move the image with the fade.

With the downloads, there are step by step video tutorials to show you how to edit image sizes and change the background colors of the text boxes that display the description text. Also, the videos show you how to take the existing code and files that you will download and place the code and the related CSS documents in to another Html document.

So there Ya Go! Enjoy and enjoy our  Slideshows.

CSS Slideshows Horizontal instructions and Downloads

CSS Slideshows Fading and Zooming instructions and Downloads