carousel.js

function EventTarget() {
    this._listeners = {};
}

EventTarget.prototype = {

    constructor: EventTarget,

    on: function (type, listener) {
        if (typeof this._listeners[type] == "undefined") {
            this._listeners[type] = [];
        }

        this._listeners[type].push(listener);
    },

    trigger: function (event) {
        if (typeof event == "string") {
            event = { type: event };
        }
        if (!event.target) {
            event.target = this;
        }

        if (!event.type) { //falsy
            throw new Error("Event object missing 'type' property.");
        }

        if (this._listeners[event.type] instanceof Array) {
            var listeners = this._listeners[event.type];
            for (var i = 0, len = listeners.length; i < len; i++) {
                listeners[i].call(this, event);
            }
        }
    },

    off: function (type, listener) {
        if (this._listeners[type] instanceof Array) {
            var listeners = this._listeners[type];
            for (var i = 0, len = listeners.length; i < len; i++) {
                if (listeners[i] === listener) {
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }
};

function Carousel(el, options) {
    this.element = $(el);
    this.options = options;

    this._container = this.element.children('ul');
    this._panes = this._container.children('li');
    this._paneCount = this._panes.length;

    this._currentPaneIndex = 0;
    this._paneHeight = 0;
}

Carousel.prototype = new EventTarget();

Carousel.prototype._init = function () {
    this._panes.show();
    this._setPaneDimensions();
    this._bindEvent();
};

Carousel.prototype._setPaneDimensions = function () {
    var paneHeight = window.innerHeight || document.documentElement.clientHeight,
        panes = this._panes;

    this._paneHeight = paneHeight;

    panes.height(paneHeight + 'px');
    //this._container.height(panes.length * paneHeight);
};

Carousel.prototype._bindEvent = function () {
    var self = this,
        eventName = 'onorientationchange' in window ? 'orientationchange' : 'resize',
        timer;

    $(window).on('load ' + eventName, function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            self._setPaneDimensions();
        }, 500);
    });

    new Hammer(this.element[0], {
        swipe: false,
        drag_block_horizontal: false,
        drag_lock_to_axis: true
    }).on("release dragup dragdown", function (ev) {
            self._handleHammer(ev);
        });
};

Carousel.prototype._setContainerOffset = function (percent, animate) {
    var container = this._container,
        cssStr = "translate3d(0," + percent + "%,0) scale3d(1,1,1)";

    container.removeClass("animate");

    if (animate) {
        container.addClass("animate");
    }

    container.css("-webkit-transform", cssStr);
    container.css("transform", cssStr);
};

Carousel.prototype._showPane = function (index, animate) {
    // between the bounds
    index = Math.max(0, Math.min(index, this._paneCount - 1));
    this._currentPaneIndex = index;

    var offset = -((100 / this._paneCount) * this._currentPaneIndex);
    this._setContainerOffset(offset, animate);
};

Carousel.prototype.next = function () {
    this.trigger({type: 'change', index: this._currentPaneIndex + 1});
    this._showPane(this._currentPaneIndex + 1, true);
};

Carousel.prototype.prev = function () {
    this.trigger({type: 'change', index: this._currentPaneIndex - 1});
    this._showPane(this._currentPaneIndex - 1, true);
};

Carousel.prototype._handleHammer = function (ev) {
    switch (ev.type) {
        case 'dragdown':
        case 'dragup':
            // disable browser scrolling
            ev.gesture.preventDefault();
            // stick to the finger
            var paneOffset = -(100 / this._paneCount) * this._currentPaneIndex;
            var dragOffset = ((100 / this._paneHeight) * ev.gesture.deltaY) / this._paneCount;
            this._setContainerOffset(dragOffset + paneOffset);
            break;
        case 'release':
            // more then 50% moved, navigate
            if (ev.timeStamp - ev.gesture.startEvent.timeStamp < 400 && Math.abs(ev.gesture.deltaY) > 20 || Math.abs(ev.gesture.deltaY) > this._paneHeight / 2) {
                ev.gesture.preventDefault();
                if (ev.gesture.direction == 'down') {
                    this.prev();
                }
                else if (ev.gesture.direction == 'up') {
                    this.next();
                } else {
                    this._showPane(this._currentPaneIndex, true);
                }
            }
            else {
                this._showPane(this._currentPaneIndex, true);
            }
            break;
    }
};