CSS play

EasySlide : Responsive - easy to setup - CSS only slideshow

Hover the image for controls, click left for the previous image and right for the next image. Hover the buttons along the bottom for a preview of the images and click the buttons to go to that image.

Click on the left of the image for the previous image and the right of the image for the next image

The 'EasySlide' slideshow is responsive and will work in all the latest browsers and from IE9+, on PCs, Macs and the latest tablets and smartphones including Windows 8 smartphones.

There are 7 different ways to show the large image, slide in from left/right/top/bottom, fade in, zoom in and zoom out.

The caption also has five ways to appear, slide in from left/right/top/bottom and fade in.

The left and right arrows are produced using CSS so that their color can easily be changed. In the above demo there are opaque white and black arrows used, depending on the image color.

This is controlled by adding a single class to the image, caption and 'prev/next' span elements.

Demonstrations using the same stylesheet:
ZOOM OUT DEMOZOOM IN DEMOSLIDE UP DEMO

All images are copyright stu nicholls

All you need for 'EasySlide' is in this page source code.