Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap mobile touch gestures MDB Pro component

MDB provides you support for most common touch gestures.

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

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 });