Back on the 9th May 2011, I produced a demo to rotate through a set of images using just CSS that used :hover but did not work on touch screens.

This demo brings the original version up to date using 'input type=range' and a small jQuery routine to read the 'range' value and show the corresponding image frame.

The frame number in the 'rotation' is indicated below the image. All that is needed is to set the input type="range" max value to the number of images to make this work for any number of frames.

In this demo max="60".

This method allows the demo to work in all modern browsers including touch screens.

The CSS and jQuery routine for this demonstration is in the page head, but if you use this, please keep my copyright comment with the files.

A donation for use of this demo would be very much appreciated.