scrolling with CSS translate3d

https://github.com/cubiq/iscroll/issues/89

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<ul id="gallery">
    <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>
</ul>

CSS

/* Plain old CSS gallery (no-js) */
#gallery {display:inline-block; width:100%; white-space:nowrap; overflow:auto; border:1px solid;}
#gallery li {display:inline-block; vertical-align:middle; width:33.333333%; height:3em; white-space:normal; border:1px dotted;}

/* JS enabled */
#gallery.carousel {overflow:hidden;}
#gallery.carousel li {-webkit-transform: translate3d(0, 0, 0); -webkit-transform-origin:0 0;}

JavaScript

(function ($) {
    var $gallery = $('#gallery'),
        carouselClassname = 'carousel',
        $slider = $('<div />').slider({
            slide: function (event, ui) {
                var $items = $('li', $gallery);
            
                $items.css('-webkit-transform', 'translate3d(' + (ui.value / 100 * ( $gallery.width() - (function () {
                    var s = 0;
                
                    $items.each(function (i, el) {
                        s += $(el).outerWidth();
                    });
                
                    return s;
                }()))) + 'px, 0px, 0px)');
            }
        });
    
    // Make the gallery a carousel
    $gallery.addClass(carouselClassname);
    $slider.insertAfter($gallery);
}(jQuery));