jquery - 水平方向の画像スクローラーでjScrollPanescrollByXに変数を割り当てますか？

Question

私はjScrollPaneを使用して、さまざまな幅の画像を含む水平方向の画像スクローラーをhttp://tmcdomains.com/jScrollPane/tmc_scroll_to_animate.htmlで作成しています。

矢印をクリックするたびに、スクロールペインを各画像の幅だけ前後に移動させたいのですが。理想的には、これを行うためにスクロールバーのドラッグも気に入っていますが、私のjQueryの知識はせいぜい不安定なので、クリック機能に満足しているだけです。私はstackoverflowと開発者のドキュメントのおかげでここまでしか得られませんでした。

解決策が私を見つめているような気がしますが、それを実現することはできません。

スクローラーを柔軟にしたいので、スクローラーを更新するときにクライアントの画像の正確なサイズが常にわかるとは限らないため、.eachループを使用して.image-wrapperdiv内の画像を循環しています。各画像から幅を引き出し、合計幅の値をvar imagesWidthに割り当てて、.image-wrapperの幅を設定します。

// set the width of .image-wrapper based on the total width of the images in the div
// webkit browsers need width declared explicitly in image tag
var imagesWidth = 0;
var imageScrollX = 0;
$('.image-wrapper > img').each(function(index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($image.css('margin-left'), 10) + parseInt($image.css('margin-right'), 10);
    imageScrollX = $image.outerWidth();
});             
$('.image-wrapper').width(imagesWidth);

それは素晴らしい働きをしています。同じループを使用して各画像の幅をvarimageScrollXに割り当て、その変数を使用して各クリックでのscrollByXのX値を定義しようとしています。

var api = pane.data('jsp');                     
$('#left-arrow').bind(
    'click',
    function()
    {
        api.scrollByX(-imageScrollX);                       
        return false;
    }
);
$('#right-arrow').bind(
    'click',
    function()
    {
        api.scrollByX(imageScrollX);
        return false;
    }
);

これは一種の動作ですが、何が起こっているのかというと、scrollByX値は、クリックごとにシーケンスの最後の画像の幅を割り当てています。シーケンスの最後の画像だけではなく、シーケンス内の各画像の一意の幅をプルするためにクリックを取得する方法はありますか？

表示されているコードを含む作業ファイルは、http：//tmcdomains.com/jScrollPane/tmc_scroll_to_animate.htmlにあります。