Bootstrap mobile touch gestures Premium component
MDB provides you support for most common touch gestures.
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 previewTo 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 });