javascript - カルーセルjqueryの画像ループ

Question

li幅に応じて右にアニメーション化するカルーセルがあります。最後に到達した後、最後の画像だけが表示されるまでアニメーションを続けます。右側に空白があります。空白がなく、最初の画像が再び表示されるようにループするように設定するにはどうすればよいですか? 私の移動右のjqueryコード。

            $('#right').click(function () {
            if (currentItem === totalItems) {
                $inner.animate({
                    right: '-=' + width * (totalItems-1) + 'px'
                }, speed);
                currentItem = 1;
            } else {
                $inner.animate({
                    right: '+=' + width
                }, speed);
                currentItem += 1;
            }
        });

そのため、最後に到達した後、最初の画像に巻き戻されます。

編集：皆さんが見たい場合は、ここにフィドルがあります。