Hardware accelerated carousel kind for Enyo. Should work in all modern browsers (requires css transforms/transitions).

Carousel.css

.carousel-sliding-client {
    width: 100%;
    height: 100%;
    white-space: nowrap;
    overflow: visible;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transsform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.carousel-sliding-client > * {
    display: inline-block;
    width: 100%;
    height: 100%;
    white-space: normal;
}

Carousel.js

enyo.kind({
    name: "Carousel",
    classes: "carousel",
    handlers: {
        ondrag: "drag",
        ondragstart: "dragstart",
        ondragfinish: "dragfinish"
    },
    published: {
        //* Index of the current panel
        index: 0,
        //* Base value to be used for the swiping animation in ms
        duration: 1000
    },
    events: {
        //* Gets fired after the user has completed a swipe and right before the animation is triggered
        onTransitionStart: ""
    },
    /**
     * Detects the vendor prefix to be used in the current browser
     * @return Vendor css prefix (example: -webkit-)
     */
    getVendorPrefix: function() {
        if (!this.vPrefix) {
            var styles = window.getComputedStyle(document.documentElement, "");
            var pre = (Array.prototype.slice.call(styles).join("").match(/-(moz|webkit|ms)-/) || (styles.OLink === "" && ["", "o"]))[1];
            this.vPrefix = pre ? "-" + pre + "-" : "";
        }
        return this.vPrefix;
    },
    /**
     * Applies the horizontal position _pos_ to the sliding client
     * @param  Number pos vertical position in px
     */
    applyClientPosition: function(pos) {
        this.$.client.applyStyle(this.getVendorPrefix() + "transform", "translate3d(" + pos + "px, 0, 0)");
    },
    rendered: function() {
        this.inherited(arguments);
        this.durationChanged();
        this.indexChanged();
    },
    indexChanged: function() {
        this.offset = -this.index * this.getBounds().width;
        this.applyClientPosition(this.offset);
    },
    durationChanged: function() {
        this.applyTransition(this.duration);
    },
    /**
     * Applies the css transition property with the provided transition _duration_
     * @param  Number duration Transition duration in ms
     */
    applyTransition: function(duration) {
        this.$.client.applyStyle(this.getVendorPrefix() + "transition", duration ?
            this.getVendorPrefix() + "transform " + duration + "ms" : "none");
    },
    dragstart: function(sender, event) {
        this.applyTransition(0);
    },
    drag: function(sender, event) {
        this.dx = event.dx;
        this.applyClientPosition(this.offset + this.dx);
    },
    dragfinish: function(sender, event) {
        // Calculate the effective transition duration based on the duration base value and the velocity
        // of the swipe. (Probably not the best formula but it works.)
        var dur = this.duration * (1-Math.abs(this.dx)/this.getBounds().width) * (1-Math.abs(event.ddx)/150);
        this.applyTransition(dur);
        // Apply the new index according to the swipe direction but make sure
        // the index stays within the valid bounds (Bounce back if left or right limit is reached)
        if (this.dx < 0 && this.index < this.getClientControls().length-1) {
            this.doTransitionStart({fromIndex: this.index, toIndex: this.index+1});
            this.setIndex(this.index + 1);
        } else if (this.dx > 0 && this.index > 0) {
            this.doTransitionStart({fromIndex: this.index, toIndex: this.index-1});
            this.setIndex(this.index - 1);
        } else {
            this.indexChanged();
        }
    },
    components: [
        {name: "client", classes: "carousel-sliding-client"}
    ]
});

Example:

enyo.kind({
    name: "CarouselExample",
    components: [
        {kind: "Carousel", classes: "enyo-fill", components: [
            {style: "background-color: red"},
            {style: "background-color: blue"},
            {style: "background-color: green"}
        ]}
    ]
});