Snippets are small pieces of reusable code that solve specific problems within a website or web application. The focus here is on client side coding using HTML5, CSS (CSS3) and Javascript.

Accessible touchscreen enabled sliding images

This snippet creates an image slider that is accessible via a mouse, a keyboard, as well as via touchscreen devices.

This is a library-free script but a jQuery version may be available shortly.

Demo and download

View the demo or download the files.

Coding

  • This code works out of the box for all modern browsers including IE >= 10.
  • You do not need to run the code on a web server. Opening the index.html file from your local machine/filesystem in a web browser will result in a fully working demo.
  • The demo and download package includes the HTML5 boilerplate from https://html5boilerplate.com.

Why have two javascript versions?

The jQuery version has the lowest additional overhead if you are using jQuery anyway.

However although the ‘vanilla’ javascript file is larger, it has no need for jQuery and hence has lower overall overheads and will have a quicker page load time.

More help?

You are free to use the the Touch-Slider code, with the exception of any photographic images included for demonstration purposes, under the MIT license. If further development or support is required, on a commercial basis, then contact me.