Carousel with touch support

Carousel.js

;(function ($, Hammer) {

    'use strict';

    var Carousel = function (element) {
        this.container = element;
        this.paneGroup = $('.Carousel-paneGroup', this.container)[0];
        this.direction = Hammer.DIRECTION_HORIZONTAL;
        this.panes = $('.Carousel-pane', this.container);
        this.paneGroupSize = this.paneGroup.offsetWidth;
        this.currentIndex = 0;
        this.hammer = null;
        this.init();
    };

    Carousel.prototype = {
        init: function () {
            this.hammer = new Hammer.Manager(this.paneGroup);
            this.hammer.add(new Hammer.Pan({direction: this.direction, threshold: 10}));
            this.hammer.on('panstart panmove panend pancancel', Hammer.bindFn(this.onPan, this));

            this.show(this.currentIndex);
        },

        resize: function () {
            this.paneGroupSize = this.paneGroup.offsetWidth;
            this.show(this.currentIndex);
        },

        show: function(showIndex, percent, animate) {
            showIndex = Math.max(0, Math.min(showIndex, this.panes.length - 1));
            percent = percent || 0;

            var className = this.paneGroup.className;
            if (animate && className.indexOf('is-animated') === -1) {
                this.paneGroup.className += ' is-animated';
            } else
            if (className.indexOf('is-animated') !== -1) {
                this.paneGroup.className = className.replace('is-animated', '').trim();
            }

            var paneIndex, pos, translate, paneLength = this.panes.length;
            for (paneIndex = 0; paneIndex < paneLength; paneIndex++) {
                pos = (this.paneGroupSize / 100) * (((paneIndex - showIndex) * 100) + percent);

                translate = Modernizr.csstransforms3d ? 'translate3d(' + pos + 'px, 0, 0) scale3d(1,1,1)' : 'translate(' + pos + 'px, 0)';
                this.panes.eq(paneIndex).css('transform', translate);
            }

            this.currentIndex = showIndex;
        },

        onPan: function (ev) {
            var percent = (100 / this.paneGroupSize) * ev.deltaX;
            var animate = false;
            if (ev.type === 'panend' || ev.type === 'pancancel') {
                if (Math.abs(percent) > 20 && ev.type === 'panend') {
                    this.currentIndex += (percent < 0) ? 1 : -1;
                }
                percent = 0;
                animate = true;
            }
            this.show(this.currentIndex, percent, animate);
        }
    };

    window.Carousel = Carousel;

})(jQuery, Hammer);

Carousel.scss

.Carousel {
    position: relative;
}

.Carousel-paneGroup {
    overflow: hidden;
    position: relative;
    height: inherit;
    width: inherit;
}

.Carousel-pane {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;

    .Carousel-paneGroup.is-animated & {
        transition: all 250ms;
    }
}