CSSPLAY

CSS DEMOS › Responsive slideshow with auto play option

Date : 10th October 2014

For all the latest browsers and Operating Systems

Gloucester Cathedral - Crucible 2 Exhibition

Sitting couple on bench - L. Chadwick Jubilee IV - L. Chadwick Dodo - Death of the author - A. Fallis Mitochondrial Eve - S. Freeborough Ecstasy - A. Tebbenhoff Let there be spaces in your togetherness - S Freeborough Anatomy of an angel (black) - D. Hirst Untouched - A. Fairhurst Snail - M. Cooper Outraged Christ - C. Lutyens

A A A A A A A A A A

B B B B B B B B B B

D D D D D D D D D D

C

Information

PCs

Hover the image to show the controls - previous, next, play and thumbnail bars. Hover the thumbnail bars to see a preview of that image. When hovering a control then all the other controls will be removed from view.
Clicking the 'play' control will run auto play starting at the first image. This will hide all controls except 'pause', clicking this will stop auto play at the current image.

Tablets

Tap the image to show the controls and tap off the image to hide the controls. The control actions are the same as the PC controls above. For the iPad the thumbnail bars work by tapping the bar to show the thumbnail then tap the thumbnail to view the image. Tap off the slideshow to hide the controls.

Smartphones

The previous, next and play controls are permanently shown at the bottom of the image. The thumbnail bars are removed The pause control is shown at the bottom center of the image when auto play is running.

The control icons are from my webfont and can be any color and size you like, controlled using the stylesheet. I will be adding more icons to this font as required.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
2. You may NOT place this demonstration on another site for others to download.
3. You may NOT redistrubute or resell this demonstration.
4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
5. Please see the Copyright statement above regarding the requirement for a support donation.