Carrusel no centrará sus diapositivas

Tengo un problema con mi carrusel de jQuery: sus diapositivas no se centran en la ventana gráfica cuando hago clic en el botón "siguiente diapositiva".

En cambio, se colocarán 'en algún lugar' alrededor del centro, ligeramente fuera de lugar, ya que jQuery parece deslizar mis imágenes según el ancho total del carrusel (creo).

Aquí les dejo una página de prueba que hice para que la vean mejor:

http://paragraphe.org/stackoverflowdemos/slider-how-to-center-slides/

...y aquí está el código que estoy usando, tomado de un tema de WordPress. Jugué con él durante un tiempo y logré cambiar algunos comportamientos, pero no era mi principal preocupación.

jQuery(document).ready(function () {
    jQuery("#mainholder").css("width", "100%");
    jQuery("#mainindex").css("width", "100%");
    jQuery("#mainholder #holder div.singleitem").css({
        "margin-left": 10
    });
    jQuery("#mainholder #holder div.singleitem").last().addClass("last").css({
        "border-right": "10px"
    });
    jQuery("#mainindex #imagediv img").css({
        "margin-left": 0
    });
    jQuery("#mainindex #imagediv img").last().css({
        "margin-right": 0
    });
    totalwidth = jQuery("#holder").width(); // Total large image width          
    totalimages = jQuery("#holder .singleitem").size();
    totalwidth = totalwidth + (10) * (totalimages + 1);
    jQuery("#holder").css({
        "width": totalwidth
    });
    sliderwidth = 1;
    jQuery("#imagediv img").each(function () {
        sliderwidth = sliderwidth + parseInt(jQuery(this).attr("width")) + 1;
    });
    jQuery(".end").css("right", "0");
    if (totalimages <= 1) {
        jQuery("#mainholder").addClass("fixwidth");
        jQuery("#mainholder").css("width", "960px");
        jQuery("a.leftnav,a.rightnav").hide();
    }
    variablechange(); //for initialization before window resize is called
    function variablechange() {
        tempslidedist = new Array();
        slidedist = new Array();
        screenwidth = jQuery(window).width(); // Visible screen width
        handlewidth = ((screenwidth / 10) - 6); // width of the slider handle according to the width of the screen      
        screenmid = (screenwidth) / 2; // Middle of visible screen
        tempval = (screenmid * 10000) / (totalwidth); // The total distance the slider has moved when it reaches the middle of the screen.
        mval = totalwidth * .000095; //
        holdermulti = (totalwidth - screenwidth + 10) / 1000; // Multiple value with which the main images move     
        halfhandlewidth = handlewidth / 2;
        jQuery("#imagediv").css("width", (sliderwidth) + "px");
        indexwidth = (sliderwidth - handlewidth - 5);
        jQuery("#index").css("width", indexwidth + "px");
        divratio = (indexwidth) / 1000;
        if (sliderwidth > screenwidth) {
            jQuery("#index").css("margin-left", "71px");
        } else {
            jQuery("#index").css("margin-left", "");
        }
        slidespeed = (1000 / (sliderwidth)) * 95;
        if (sliderwidth < (handlewidth + 10) || totalimages == 0) { //+10 is added to make the difference larger so when they are almost same, the
            error doesnot takeplace
            jQuery("#mainindex").hide();
            jQuery(".slider-navigation a.leftnav, .slider-navigation a.rightnav").hide();
        } else {
            jQuery("#mainindex").show();
            jQuery(".slider-navigation a.leftnav, .slider-navigation a.rightnav").show();
        }
        for (var i = 0; i < totalimages; i++) {
            if (i == 0) {
                tempslidedist[i] = ((jQuery("#imagediv img:eq(" + (i) + ")").width() - ((handlewidth + 3) / 2)) + (jQuery("#imagediv
 img:eq(" + (i + 1) + ")").width() / 2) + 0);
            } else {
                tempslidedist[i] = (tempslidedist[i - 1] + jQuery("#imagediv img:eq(" + (i) + ")").width() / 2 + jQuery("#imagediv
 img:eq(" + (i + 1) + ")").width() / 2 + 0);
            }
            slidedist[i] = Math.round(((tempslidedist[i])) / divratio);
        }
    }
    jQuery(".imgexcerpt").hide();
    jQuery(".imglink").mouseover(function () {
        jQuery("#mainholder").addClass("disablemove");
    });
    jQuery(".imglink").mouseout(function () {
        jQuery("#mainholder").removeClass("disablemove");
    });
    jQuery(".imgexcerpt").mouseover(function () {
        jQuery("#mainholder").addClass("disablemove");
    });
    jQuery(".imgexcerpt").mouseout(function () {
        jQuery("#mainholder").removeClass("disablemove");
    });
    jQuery(".imglink").click(function (e) { //Toggling the show/hide the img excerpt link   
        thisimgwidth = jQuery(this).parent().find("img").width();
        if (thisimgwidth < 355) {
            exceptwidth = (.85 * thisimgwidth);
        } else {
            exceptwidth = 340;
        }
        jQuery(this).parent().siblings().find(".imgexcerpt").fadeOut("fast").end().find("img").fadeTo("fast", 1).end().find(".imglink").addClass("show");
        if (jQuery(this).hasClass("show")) {
            jQuery(this).parent().find(".imgexcerpt").css({
                "width": exceptwidth
            }).fadeIn("fast");
            jQuery(this).parent().find("img").fadeTo("fast", .3);
            jQuery(this).removeClass("show");
        } else {
            jQuery(this).parent().find(".imgexcerpt").css({
                "width": exceptwidth
            }).fadeOut("fast");
            jQuery(this).parent().find("img").fadeTo("fast", 1);
            jQuery(this).addClass("show");
        }
    });
    jQuery("#index").slider({
        max: 1000,
        animate: true,
        step: 1,
        change: ifSliderChange,
        slide: ifSliderSlide
    });
    jQuery("#index").slider("value", (0));
    jQuery("#index").css("z-index", "99");
    mainfunctions(); //for initialization before window resize  
    function mainfunctions() {
        jQuery("#index .ui-slider-handle").css("width", (handlewidth) + "px");
        if (sliderwidth < screenwidth) {
            jQuery("#index .ui-slider-handle").css("margin", "0 -" + (handlewidth / 2 + 3) + "px");
        }
    }
    animating = false;
    click = -1;
    jQuery(".leftnav").live("click", function () {
        if (!animating && !jQuery("#mainholder").hasClass("disablemove")) {
            if (click >= 0) {
                click--;
            }
            var sliderpos = jQuery("#index").slider("value");
            var flag = 0;
            for (var j = totalimages; j >= 0; j--) {
                if ((sliderpos > slidedist[(j)]) && flag == 0) {
                    click = j;
                    flag = 1;
                }
            }
            if (click < 0) {
                jQuery("#index").slider("value", (0));
            } else {
                jQuery("#index").slider("value", (slidedist[click]));
            }
            animating = true;
        }
    });
    jQuery(".rightnav").live("click", function () {
        if (!animating && !jQuery("#mainholder").hasClass("disablemove")) {
            click++;
            var sliderpos = jQuery("#index").slider("value");
            var flag = 0;
            for (var j = 0; j < totalimages; j++) {
                if ((slidedist[(j)] > sliderpos) && flag == 0) {
                    click = j;
                    flag = 1;
                }
            }
            if (sliderpos >= 1000) {
                jQuery("#index").slider("value", (0));
                click = -1;
            } else {
                jQuery("#index").slider("value", (slidedist[click]));
            }
            animating = true;
        }
    });
    jQuery(".end").css("z-index", "99");
    jQuery(".start").css("z-index", "99");
    jQuery(".end").click(function () {
        jQuery("#index").slider("value", (1000));
    });
    jQuery(".start").click(function () {
        jQuery("#index").slider("value", (0));
    });
    jQuery(window).resize(function () {
        variablechange();
        mainfunctions();
    });

    function ifSliderChange(e, ui) {
        jQuery("#mainindex").animate({
            scrollLeft: (((ui.value - tempval) * mval))
        }, 500);
        jQuery("#mainholder").animate({
            scrollLeft: (ui.value * holdermulti)
        }, 500, function () {
            animating = false;
        });
    }

    function ifSliderSlide(e, ui) {
        jQuery("#mainholder").prop({
            scrollLeft: (ui.value * holdermulti)
        });
    }
});

¿Sabrías una manera de obtener las imágenes en el centro de la ventana gráfica?

Muchas gracias!