This is responsive web design Era where clients ask their developers to create websites which work on mobile, tablet devices in order to gain more business exposure. Touch events generally used for creating responsive web designs and nowadays almost every WordPress themes with responsive layouts also support touch events.
There are myriad of jQuery touch plugins are available over internet, but finding one which suits your requirements is bit time consuming task.
To spare you from doing such efforts, I have compiled a list of useful jQuery Touch Event Plugins that will help you to create responsive websites that will look visually stunning on your mobile devices.
I hope you will find the list useful and handy for your web projects, integrate following plugins for your projects and make them responsive and touch friendly Enjoy !!
1. Wrangle
Wrangle is a responsive, touch-friendly selection plugin for jQuery or Zepto. Wrangle offers a unique method of multiple selection: by drawing a line through items to select them. It gives your app a new way to perform multiple selections: a mouse, a finger or a stylus. The plugin is lightweight and designed to be exstensible and adaptable. It’s also highly experimental, due in no small part to the diversity of touch implementations in various devices and browsers
2. Glide.js
Glide.js is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It’s simple, lightweight and fast. Designed to slide, no less, no more. It works on smartphones, tablets and desktops. It supports Swipe event, Arrows and bullets navigation, Keyboard navigation, Public API with callbacks, Autoplay and Pause on hover. It is released under MIT License.
3. Ion. Range Slider
Ion.Range Slider is a nice, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS. It supports touch-devices which includes iPhone, iPad and etc. It has been tested on Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+). It is freely distributed under MIT license.
4. Owl Carousel
Owl Carousel is a jQuery plugin that allows us to create responsive carousel sliders so quickly. The plugin is touch-friendly and capable of featuring any HTML content with almost any markup. It has options for setting the pagination/sliding speed, enabling/disabling auto-play, showing bullet navigation and more.
5. AudioPlayer.js
AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page. The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support. It has the major controls (play/pause, volume and duration) and weights only 4kb.
6. noUiSlider
noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!
7. Swipebox
Swipebox is a jQuery lightbox plugin that has support for touch events and works well in responsive layouts. It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too. The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers. Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar).
8. Unslider
Unslider is a tiny jQuery plugin ( less than1kb minified and gzipped) for sliding any HTML content. It adapts to responsive layouts out-of-the-box and arranges itself automatically if the size of each slide is different. The slides can be browsed with the help of a bullet navigation or using keyboards. Optionally, swipe/touch support can be added with jQuery.event.swipe plugin (a plug ‘n’ play solution).
9. Deeptissue.js
When working on mobile web apps, you may have experienced that browsers have differences in their gesture APIs. DeepTissue.js is a library that removes such differences (of MSPointer, WebKit Touch and mouse pointer APIs) and provides a cross-browser gesture handling library. It has support for all the major events like tap, double tap, tap and hold, rotate, scale or swipe. The library is standalone but a jQuery-friendly version is also under development.
10. iLightbox
It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode. The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe). There are retina-ready skins, it can be completely customized and iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.
11. jQ RangeSlider
jQRangeSlider is a jQuery and jQuery UI-powered slider plugin that has support for both numerical values and date/time. It works within a given range of values and can be set to use custom steps(like 10-by-10 or week-by-week). The plugin works well on touch devices (accept mouse wheels too), can be themed with CSS (there are 2 built-in themes) and provides callbacks for each change in values for interacting easily.
12. ThreeSixty
ThreeSixty is a jQuery plugin for generating a draggable 360 preview from an image sequence. Simply include the latest jQuery and threesixty.js in your HTML page. Keyboard arrow keys are supported. It also supports touch and wipe on mobile devices as well. nextFrame() & prevFrame() methods allows users to connect UI controls.
13. Royal Slider
Royal Slider is a jQuery plugin for displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features. The slider is very customizable with 50+ options, 4 skins with PSD files, 9 pre-built templates (and more coming) and full CSS styling. It works in all major browsers, the output is responsive down to mobile (touch friendly) and works fast, thanks to CSS3 animations (with JS fallback). The slider also loads fast independently from the number of slides as there is lazy-loading (only next few items are loaded).
14. jQuery UI Touch Punch
Touch Punch is a small hack which brings touch events to the library by using simulated events to map touch events to their mouse event analogs. It is a plug ‘n’ play solution, just insert the file into your web pages and there is nothing more to setup. The hack works in all the widgets and in most scenarios, however, considering it is a simple hack, make sure you test any complex usage.
15. Hammer.js
Hammer.js is a JavaScript library for adding touch gestures support to any website so that users can interact with them easier on touch devices. It requires jQuery, only 2kb sized and supports tap, double tap, hold, drag and transform. For drag gestures, it can also return extra info like the angle, direction and distance.
16. Sequence
Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3. It supports all modern browsers, and gracefully degrades in older browsers. And it supports touch devices and swiping too. You can check out the Modern Slide In, Sliding Horizontal Parallax and Apple Style demo
17. Mobiscroll
Mobiscroll is a wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab). The control can easily be customized to support any custom values and can even be used as an intuitive alternative to the native select control (dropdown list).
18. Camera
The developer of Diapo has created a jquery plugin named Camera which has more features and works very well with responsive layouts. Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions. Items can be browsed with prev-next buttons or bullet navigation, a play/pause option exists and a loader informs the user about the timing of the next slide.
19. jQTocuh
jQTouch is a jQuery plugin for mobile web development on forward-thinking devices. You can create powerful mobile apps with just HTML, CSS, and jQuery. It supports native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1, and Pre.
20. Photoswipe
PhotoSwipe is a free and full-featured image gallery for mobile and touch devices. It is built with HTML, CSS + JavaScript and doesn’t depend on any frameworks. The interface is native-like and offers a similar experience with the ability of swiping items and support for orientation (also, resizes images automatically).
21. Touch Gallery
Touch Gallery is a jQuery image gallery plugin which brings the native look and feel of native photo-viewing applications to the mobile browsers. It supports browsing through the images with gestures and also works with desktop browsers with limited functionality.
22. Slick
Slick is fully responsive jquery touch carousel plugins, it provides numerous features such as desktop mouse dragging, infinite looping, fully accessible with arrow key navigation, separate setting per breakout and many more.
23. Interact.js
interact.js is a powerful, flexible, snappable drag and drop, resizing and multi-touch gestures for modern browsers (and also IE8+)
24. jQuery Interactive 3D
jQuery Interactive 3D is a plugin that allows us to accomplish a similar functionality using multiple images. It is so easy to use and works with a simple function and a list of specifically-named images. And, there are options for customization like the cursor icon, speed, touch support, auto-play and more.
25. Touch Swipe
TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc. Detects single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop. Time and distance thresholds can be set to destinguish between swipe gesture and slow drag. Allows exclusion of child elements (interactive elements) as well allowing page scrolling or page zooming depending on configuration.
