Please note, this is a STATIC archive of website www.cssplay.co.uk from 19 Oct 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

CSS PLAY - hzSwipe

A change from pure CSS, this demonstrations uses HTML5/CSS and javascript (no jQuery) to have panels with a 'swipe' action in all the latest browsers and devices, from mobiles and iPads to Windows 10 tablets and widescreen PCs.

So if you have a touch screen device just swipe the above panel to move to the next one, and if you are on a 'mouse' device just click/hold and swipe. There is an indicator at the bottom of the screen to show which slide is current. The javascript will detect if you are using mouse or touch 'swipes', and on a device that uses both it will detect which one you are using. It will even detect when you change from mouse to touch 'swipes'.

The action is speed dependant, so that a slow 'swipe' will not change the panel and it will return to its original position.

A vertical swipe will scroll down the screen on touch devices.

I have also added links to the first three panel images and text. So a click/tap on a link will activate that link. I have not added the routine to take you to the new page, but have added an alert to show the link url.

If you click/tap a link and swipe before releasing the mouse button or taking your finger off the screen then the link will not activate but it will swipe the panel instead.

Finally if you click/tap a link but hold the click/tap for longer than 200mS then the link will not be activated.

Update 1.1 - 10th February 2016 - Added function to allow the indicators at the bottom of the panels to be click/tapped to take you to that panel. This is mainly for laptops with touch pads. I am also looking into having touch pad swipe support but monitoring touch pad two finger horizontal swiping is a little difficult.

Update 1.2 - 20th February 2016 - Added function for trackpad two finger left/right swiping.

This demo is free to use. Please email: my-email-name@cssplay.co.uk for the zip file.
All I ask is that you keep the copyright comments in the javascript and stylesheet.

Home page | Demonstration comments

Copyright ©2016 - CSS PLAY - Stu Nicholls - All rights reserved