jQuery(function () {
    var container = jQuery('#pane1');
    var ul = jQuery('ul.SlideList', container);
    var slidebar = jQuery('.slider', container);
    var ul_width = 0;
    ul.find("> li").each(function () {
        var el = jQuery(this);
        ul_width += el.outerWidth(true);
    });
    ul.width(ul_width);

    var moving_available = ul.innerWidth() - container.outerWidth();

    slidebar.slider({
        min: 0,
        max: moving_available,
        animate: true,
        handle: '.ui-slider-handle',
        //event
        slide: function(event, ui) {
            ul.css({
                'left' : ui.value*(-1)
            });
        },
        stop: function(event, ui) {
            ul.css({
                'left' : ui.value*(-1)
            });
        }
    });
});