jQuery slider2のページアイコン

質問

小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。
既成のJavascriptプログラムの中でスライドショー向けのｊQuery slider2をダウンロードし、
ウェブサイトに適応してみました。
概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン（class="jquery-slider-page"として作成されている部分？）が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。
なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。
もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。

不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。
使用しているjsは下記のとおりです。

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
jquery.slider.min.js（http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用）
また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。

他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。

よろしくお願いします。

回答No.1

my--

jquery.slider.js の128行目あたり（クリックイベント処理周り）を若干書き換えて「現在表示している部分に相当するアイコンをクリック」を制御しています。オリジナルと照らし合わせて変更してみて下さい。

...
var positionEls = $('<span class="jquery-slider-pages"></span>');
$this.addClass('jquery-slider').width(settings.width).height(settings.height);
var children = $this.children();
children.each(function (i) {
var $tmp = $(this);
_this = $(this).addClass('jquery-slider-element');
positionEls.prepend($('<span class="jquery-slider-page"></span>').bind('click', { index: i }, function (e) {
if ($this.hasClass('jquery-slider-sliding') || children.index(_this) === e.data.index) return;
_last = _this;
_this = $tmp;
_draw();
}));
});

if (settings.showProgress) {
...

お礼

ご回答有難うございます。
書いてくださったスクリプトを書き換えてテストしてみましたところ、
問題なく、期待した通りの動作に変わったので、大変に助かりました。

見比べてみましたが、かろうじてわかったのは
childrenという変数名を宣言したことだけで肝心な部分は理解できませんでした。
再度自力で理解できるよう勉強するつもりですが、
もしお時間が許されるようでしたら、理解するためのヒントなどいただければ幸いです。

ありがとうございました！