CSSPLAY

CSS DEMOS › Swipe Left/Right Slide Show with permanent image changes

Date : 15th August 2012

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

I have had lots of request to produce a slideshow that uses the iPad 'swipe' method of changing the displayed images, but unfortunately there is no way to do this using just CSS.

It would be nice if there were pseudo-class ':swipeleft', ':swiperight', ':swipeup' and ':swipedown' which could be used on any element in the same way as :hover and capture mouse movement as well as finger swipes. In this way we could control all the actions using just CSS.

But until this happens, the only way to do this is by jQuery/javascript.

So this is a slight departure for CSS play in that the demo is not just CSS, but also uses a small jQuery routine to read the mouse movement and finger swipes to change the images.

On a PC the mouse 'swipe' is used and on the iPad etc. a finger 'swipe' is used. If you have a touch screen PC then this should also allow finger 'swipes'.

For mouse control just hover the image, click and hold the left button and move the mouse in the direction you want to go, this will drag the image with the mouse. Release the mouse button to end the drag and the next or previous image will slide into view. If you move the mouse off the left or right of the image whilst holding down the mouse button then this will automatically go to the next or previous image and the mouse drag will end.

For the iPad etc. just use your finger to drag the image left or right. Taking your finger off the image will make the next or previous image slide into view.

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.