Bootstrap mobile touch gestures Premium component

MDB provides you support for most common touch gestures.

Pan gesture
Rotate gesture
Press gesture
Tap gesture
Swipe gesture
Pinch gesture

Basic example: Carousel with gestures support


Click on the button below to launch a live example and see the Carousel with a gestures support in action.

Live preview


To make it work, use the code below together with one of MDB carousels.

Note: Remember to set a corresponding ID in both Carousel and script.


$(document).ready(function () {
    $('#carousel-example-1').hammer().on('swipeleft', function () {
        $(this).carousel('next');
    })
    $('#carousel-example-1').hammer().on('swiperight', function () {
        $(this).carousel('prev');
    })
});

Usage

It’s easy to use, just include the library and create a new instance.


var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
	console.log(ev);
});

By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:


hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

Enabling vertical or all directions for the pan and swipe recognizers:


hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

Also the viewport meta tag is recommended, it gives more control back to the webpage by disabling the doubletap/pinch zoom. More recent browsers which support the touch-action property don’t require this.


<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

More control

You can setup your own set of recognizers for your instance. This requires a bit more code, but it gives you more control about the gestures that are being recognized.


var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

The example above creates an instance containing a pan and a quadrupletap gesture. The recognizer instances which you create are being executed in the order they are added, and only one can be recognized at the time.


hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });