70+ jQuery Touch Event Plugins – Support Touch Gestures!

July 8, 2013 · 1 comment

by Lars

advanced-slider-jquery-xml-slider

As the market for mobile devices with touch screens explodes, more and more websites are optimized for offering mobile visitors an optimal experience. With jQuery touch event plugins it is rather simple to allow touch screen users to interact with and navigate your website using touch gestures!

In the recent years, the need to make websites mobile friendly and responsive have turned the web design industry upside down. Reality is that the number of smartphones and mobiles devices sold have increased massively and actually already has surpassed the number of PCs sold. With mobile devices comes touch screens and a completely new set of requirements for design user interfaces and interactions.

Touch events are typically used in responsive web designs and you will see that most new WordPress themes with responsive layouts also support touch events. For inspiration on finding a cool WordPress theme, specifically designed to look great on mobile devices see this article.

There are quite a lot of useful jQuery Touch event scripts to choose from so I decided to make the ultimate roundup to help web developers start using touch events. I have come up with quite a large number of jQuery touch plugins for this post and I hope you will find what you are looking for. In order to make it easier for you to browse through I have indexed them into “ready to use touch even plugins” and “building blocks for developers”. The touch event building blocks are scripts that you can use to add touch event support to your own website, themes and plugins.

I hope you will find this list inspirational and useful. Please leave me a comment and feel free to share this resource with your colleagues.


ElegantThemes
ThemeForest

Advertisement
Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.

Article index

Ready to use jQuery touch event plugins

RoyalSlider – Touch-Enabled jQuery Image Gallery – MORE INFO / DEMO

royalslider

RoyalSlider is easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support for mobile devices. As navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. Developed in best practises of HTML5, CSS3 transitions are used for all animations

Swiper – MORE INFO

swiper

Swiper – is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works great on Android, Windows Phone 8 and modern Desktop browsers.

Advanced Slider – jQuery XML slider – MORE INFO / DEMO

advance-slider

Advanced Slider is fully responsive, mobile-ready, SEO-friendly, and offers you the option to use either HTML markup or XML. The plugin also provides an easy to use API which will allow you to further enhance the functionality of the slider and will make it possible to integrate it into your own application.

jQuery Banner Rotator / Content Slider / Carousel – MORE INFO / DEMO

banner-rotator

All In One is an Advanced Jquery Slider which comes in 5 flavors: Banner Rotator, Thumbnails Banner, Banner with Playlist, Content Slider, Carousel. It allows you to easily create powerful sliders with animated text using HTML standard tags, making the slider very easy to setup and maintain.

ScreenSlider – Reponsive Touch Presentation – MORE INFO / DEMO

screen-slider

ScreenSlider is a fullscreen slider which allows you customize effects for all parts with responsive design, support touch to move slides. Just little changes in HTML you can create a professional presentation that works on almost platforms for your projects.

Sequence – MORE INFO

sequence

Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles. No instance of Sequence need ever be the same. There are no limitations and no in-built themes. Supported in modern desktop browsers, mobile browsers and even in old versions of Internet Explorer via a traditional fallback theme.

Sky jQuery Touch Carousel – MORE INFO / DEMO

touch-carousel

Sky jQuery Touch Carousel is a jQuery carousel plugin with rich set of features. It is responsive, touch-enabled, fast and smooth. It can be easily integrated into your own web projects. You can customize the visual appearance of the plugin with the help of the plugin options and CSS.

Smooth Zoom Pan – jQuery Image Viewer – MORE INFO / DEMO

smooth-zoom-pan

This is a javascript / CSS based image viewer prepared to display product photos, maps or any image within custom small area. Can be configured and implemented in web pages with simple copy / paste steps.

TouchCarousel – jQuery Content Scroller and Slider – MORE INFO / DEMO

touch-carousel

TouchCarousel is mobile-friendly and lightweight jQuery content scroller with touch navigation for mobile and desktop. May be used as carousel, banner rotator and image gallery.

iosSlider – Touch Enabled jQuery Horizontal Slider Plugin – MORE INFO

ios-slider

iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

WowBook, create ebooks with page flip – MORE INFO / DEMO

wowBook-page-flip

WowBook is jQuery plugin that allows you to create a online publication(like a book or magazine) with 2 different page flipping effects.

Versatile Touch Slider – MORE INFO / DEMO

versatile-touch-slider

Versatile Touch Slider is a jQuery plugin that offers a variety of options. It may just be a banner rotator or a shelf to display products. Has the touch feature to mobile and drag for the desktop. The navigation can also be done via buttons and menu. Through the lightbox it is possible show multimedia content (video, audio, image and html content).

jQuery Homepage Banner Slideshow / Product viewer – MORE INFO / DEMO

homepage-banner-slideshow

This file is suitable for homepage banner, slideshow, product viewer, Gallery even though you can use as an intro. All animations are customizable so it suitable for any type of banners. You can use any number of layer on each slider. You can position and spacing each layer easily using data attributes. In download file, five default samples are available in separate html file.

jQuery DragPan – MORE INFO / DEMO

dragpan

Give your website visitors the ability to navigate a large area of rendered HTML quickly. Usefull for creating maps of supermarkets, shopping malls, theme parks, zoos, festival sites, theatres, airports, seating plans in fact anywhere where the map would be larger than the users browser.

Translucent – Responsive Banner Rotator / Slider – MORE INFO / DEMO

translucent

This is a jQuery Banner Rotator / Slideshow with translucent background set for caption. Supports Responsive and fluid layouts. Supports touch swipe navigation on iPad and Android tablets. 8 example variations included with source package. Around 55 plugin settings included for deeper customization. The captions can be customized by both plugin settings as well as CSS .

PhotoSwipe – MORE INFO

photoswipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

Touch Timeline – MORE INFO / DEMO

touch-timeline

Touch Timeline is a really simple script that will take clean and semantic HTML code and turn it into an elegant and beautiful timeline/content slider. And because the script the script is very optimized for touchscreen devices, your visitors will get even better experience when viewing your site in an iPad for example. Additionally, the interface was designed with compatibility in mind. It has been designed to be very neutral to make sure it doesn’t conflict with the rest of the site’s design, visually. And you can always open the CSS and customize the looks!

Parallax Slider – Responsive jQuery Plugin – MORE INFO / DEMO

parallax-slider

Parallax Effect – Full Collection of Sliders comes in 4 versions: Classic, Perpetuum Mobile, Mouse Interaction and Ultra. Each of these 4 versions has 2 skins (bullets & thumbs) and can be used as Fixed Dimensions or as Full Width. Please see the features and check the live preview of this slider and convince yourself of its quality.

jQuery Mega Image Viewer – animated zoom and pan – MORE INFO / DEMO

mega-image-viewer

The mega image viewer jQuery plugin allows you to easily replace <div> tags with animated image viewers. Viewer used for displaying high-resolution object (image – JPG, PNG, GIF). Viewer displays the given display object inside the user-defined viewport area. Viewer allows to control the position and zoom of the object displayed inside the viewport. Viewer controls the sliding and zoom of the displayed object so that the viewport area will be filled completely.

Zozo Accordion – Responsive and Touch-Friendly – MORE INFO / DEMO

zozo-accordion

Zozo Accordion is not just another accordion. It’s responsive and touch-friendly with a lot of customization options that can be integrated into your site/blog quickly without writing any code. Some of its key features includes: such as CSS3 transitions with jQuery fallback, horizontal & vertical accordion, Load content with AJAX, custom styled scrollbar for Webkit, 10 unique themes, semantic HTML5 and SEO friendly and much more.

Super menu pack (10 menus) – MORE INFO / DEMO

super-menu

Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects. It’s perfect for anyone who wants to give a special touch to their designs or find a starting point. I tried to create a collection as varied as possible in style and appearance to give you choice. Thinking in design working with code.

SwinxySwipe – jQuery Touch & Mouse Pagination – MORE INFO / DEMO

swinxyswipe

leak, smooth and simple pagination which works across desktop and touch devices. SwinxySwipe brings together everything you need to achieve the same swipe enabled pagination effect as seen in various app stores and native app widgets but in a way which works across touch and mouse devices.

wmuSlider, a jQuery responsive slider – MORE INFO

wmu-slider

I want to give back to the community by sharing the code used for the responsive slider on thehomepage. Please keep in mind that it’s still very raw (really) and under the MIT LICENSE, which basically means: break it, steal it but THE STUFF IS PROVIDED “AS IS”!

Zuper Responsive Multitouch Slider – MORE INFO / DEMO

zuper-slider

This Zuper Slider uses unobtrusive javascript and a powerful configuration panel for effects and design elements to transform a block of simple HTML markup into a beautiful elegant slider. When we create the Zuper Slider is lightweight, fast loading, mobile ready, responsive, easy to use,has multiple skins and much more. Zuper Slider is the most complex and powerful slider that you can use. Saves development time – Powerful features – Simple implementation – Fully customizable.

ZoomShowcase – A jQuery Banner Rotator – MORE INFO / DEMO

zoomshowcase

Looking for a different kind of jQuery banner? ZoomShowcase is a unique jQuery Banner that will add a fresh look to your website. It’s built on top of jQuery 1.9, and comes with several customizable options.

RollBar – jQuery ScrollBar Plugin – MORE INFO / DEMO

rollbar

RollBar plugin was created with idea to replace standard browser scrollbars and make them customizable to fit perfectly in almost any site design. This plugin can be used not only as replacement of native browser scrollbars, but even to create slideshows with external controls. Among other features RollBar can auto adjust to window size, recognize touch events on Android and iOS devices and respond to custom jquery events to scroll content.

jQuery Splitscreen Plugin – MORE INFO / DEMO

splitscreen

Splitscreen is a bold and different way for websites to display image ads, promote content, or welcome web surfers to their web page. Splitscreen is an unique, interactive, fullscreen, billboard style, jQuery overlay plugin with three modes: splash, promo, and teaser; and several options for plugin customization, like autoplay for example.

3D Touch Carousel – MORE INFO / DEMO

3d-touch-carousel

3D Touch Carousel is a jQuery javascript plugin for creating a carousel gallery. It supports simulate 3d mode and real 3d mode powered by CSS3 . Also it has reflection for the images, and can be set titles to show on image. Touch events are supported on Android and IOSX devices.

jQuery touch development building blocks

jQuery.pop.js – MORE INFO / DEMO

jQuery-pop-js

A lightweight plugin for kinetic-drag on mobile/desktop. Pep was built out of a need for kinetic drag support for both mobile and desktop devices (click & drag). It uses the best of jQuery’s animate functions along with CSS3 animations to bring full-blown kinetic drag that works on all HTML5-ready devices.

Overscroll – MORE INFO

overscroll

Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’.

Hammer.js – MORE INFO

hammer.js

Hammer is a small javascript library that triggers gesture events on your page. It’s not about components or other cool stuff, just the events. If you want those components, you might want to take a look at jQuery Mobile or similar projects.

Touchy.js – MORE INFO

touchy.js

Touchy.js is a simple light-weight (1.98 kb minified+gzip) JavaScript library for dealing with touch events in the browser. With no dependencies, just add the script to your page and start hacking.

Swipe – MORE INFO

swipe

Swipe is the most accurate touch slider.

jQuery.event.move – MORE INFO

jquery.event.move

Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.

Query Mobile Events – MORE INFO

query-mobile-events

This is a series of plugins that create additional events that can be used in combination with jQuery when developing for mobile devices. The events are also compatible with desktop browsers to ensure ultimate compatibility for your projects.

jquery-mobile – MORE INFO / DEMO

jquery-mobile

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery.event.swipe – MORE INFO

jqyery-event-swipe

Swipe events are a thin wrapper around the moveend event; a convenience to reveal when a finger has moved in a swipe gesture. The underlying move events bubble and you can delegate them, but making the swipe events also do this would be unnecessarily expensive. Use move events if you need more flexibility.

TouchSwipe – MORE INFO / DEMO

touch-swipe

TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.

thumbs.js – MORE INFO

thumbs.js

Add touch support to your browser.

WipeTouch – MORE INFO

wipetouch[3]

jQuery plugin for touch wipe events. Detects when user wipes on all 9 directions (top, bottom, left, right and diagonals) and triggers the desired event. It triggers the desired events passing the wipe speed and amount of X and Y distance moved while touching the screen.

Flippage – MORE INFO

flippage

FlipPage is a jQuery plugin that creates the illusion of turning the pages of a book.Originally developed for a presentation on touch pad, it can also find its place in an Electronic Book for example.

Ember.js – MORE INFO

ember.js

Write dramatically less code with Ember’s Handlebars integrated templates that update automatically when the underlying data changes.

Tappable – MORE INFO

tappable

Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers. Currently it’s only tested on iOS Mobile Safari as I don’t have any other smartphones to test with.

Touchy – MORE INFO

touchy

Touchy is a highly configurable jQuery plugin. It exposes event data (velocity, etc.) for longpress, drag, pinch, rotate and swipe. Example use cases include preventing a conflict between a drag and a swipe, getting pinch abstracted across Android and iOS, or creating a single finger rotation..

jQuery UI Touch Punch – MORE INFO

touch-punch

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.

pull-to-refresh.js – MORE INFO

pull-to-refresh.js

This plugin enables a pull-to-refresh functionality in mobile safari for scrollable block elements with native scrolling on iOS (!)

JS Touch Layer – MORE INFO

js-touch-layer

JS Touch Layer is a javascript framework that abstracts away the decision of what the gesture is. It will decide for you if a tap is a tap, or a swipe is a swipe. Allowing you to bind your functions to these events without any worry.

Jester – MORE INFO

jester

Simple Gesture Recognition in JavaScript (for iOS)

jGestures – MORE INFO

jgestures

A jQuery plugin that enables you to add gesture events such as ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ and ‘orientationchange’ just like native jQuery events. Includes event substitution: a “tapone” event can be triggered by “clicking”, a “swipe” by performing a swipe-ish mousegesture.

toe.js – MORE INFO

toe.js

toe.js is a tiny library based on jQuery to enable sophisticated gestures on touch devices.

Overthrow – MORE INFO

overthrow

A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design.

Mouse Touch Pointer – MORE INFO

mouse-touch-poniter

Mouse will soon cease to be the dominant input method for computing, though it will likely remain in some form for the forseeable future. Touch is the heir to the input throne, and the web needs to be ready. Unfortunately, the current state of input on the web is… you guessed it: a complete mess!

Using the Zepto.js touch-events plugin for more responsive PhoneGap apps (without Zepto!) – MORE INFO

zepto.js

First off, let me say that the exclamation point in the title may be a bit misleading. I don’t want to give the impression that using the Zepto core is a bad thing. On the contrary, I think it’s a wonderful thing. But retrofitting it into an existing application, and replacing jQuery can be a daunting task if you’ve used some of the more esoteric jQuery features or its custom selectors.

DoubleTap for jQuery – MORE INFO

doubletap-for-jquery

This plugin adds custom touch-screen events to the given HTML elements. This should only work on iPads, iPhones, and iPod Touches. Anything else is bonus.

jQuery Mobile Pagination Plugin – MORE INFO / DEMO

jquery-pagination

The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you’ll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard.

dojox.gesture – MORE INFO

dojox.gesture

This module provides a machinery for writing unified gesture events which can run well across a wide range of devices(most single touch gesture events can also work well on desktops).

Zynga Scroller – MORE INFO / DEMO

zynga-scroller

A pure logic component for scrolling/zooming. It is independent of any specific kind of rendering or event system.

TipTap – MORE INFO

tiptap

The TipTap library is a javascript library to ease mouse and touch complex gestures definition and management on HTML DOM elements (so, though not tested, on SVG and Canvas too), as well as to provide a unified way of managing different input devices systems: mouse, touch systems and their specific data structure (iOS, Android, Windows…), Leap Motion hopefully, etc.

TouchIt: jQuery Plugin for Touch events – MORE INFO / DEMO

touchit-touch-events

Touch to mouse converter and callbacks for touch and pinch events

Lightning Touch – MORE INFO / DEMO

lighting-touch

Lightning Touch makes links responsive without the several hundred millisecond delay typical in a hendheld touchscreen browser.

PHANTOM LIMB – MORE INFO

phantom-limb

Phantom Limb makes your mouse-clicker fire simulated touchstart, touchmove, and touchend events, just like there was no mouse at all and you were pokin’ at the screen like some kinda idiot.

Interact – MORE INFO

interact

Interact is essentially a wrapper on top of touch and mouse events. It exists to make the process of writing apps / demos that handle touch events both simpler to write and also allow them to support mouse events easily.

SwipeSlide – MORE INFO

swipeslide

A Zepto Plugin for iOS like swipe navigation.

TouchScroll – MORE INFO

touchscroll

To add a scrolling capabilities to an element, that element must have a fixed size. Have a look at the demo for an elegant approach using display: -webkit-box.

MULTI-TOUCH FOR YOUR DESKTOP BROWSER – MORE INFO

multi-touch-for-desktop

Multi-touch is one of those features that’s difficult to test on the desktop, since most desktops didn’t have multi-touch hardware, and thus desktop browsers don’t have touch event support.

Touché – MORE INFO / DEMO

touche

Mouse event to touch event mapping for testing touch interfaces with desktop browsers. This means that touchstart, touchmove, and touchend are hooked up to mousedown, mousemove, and mouseend, respectively. This is generally recommended for testing purposes.

WKTouch – MORE INFO

wktouch

A JavaScript plugin for touch-capable devices, enabling multi-touch drag, scale and rotate on HTML elements.

energize.js – MORE INFO

energize.js

A tiny JavaScript snippet to make links snappy on touch devices

ISCROLL 4 – MORE INFO / DEMO

iscroll-4

iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element.

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 1 comment… read it below or add one }

Ohio Web Design April 25, 2013 at 1:16 pm

I highly recommend using iScroll 4 and Zepto whenever possible for their speed and weight. Have you used energize.js on a live site/app ?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics