sliderの連携は完結する予定だったのですが、問題が生じたため次回の完結になると思います。Sliderの改造)したのか忘れてしまったので、ここで復習しておきます。サンプル(fred10/01.html)を開いてソースを確認して下さい。sliderの改造」で説明した(nivo4/02.html)をベースにしています。表示している画像が異なるだけでcssやjQueryは同じ事を確認して下さい。buttonをクリックした時の処理も以下の様に同じになっているので、buttonをクリックすると「D」の画像に切り替わります。※0から始まる(Aが0)のでDは3番目です。sliderを外部から操作するためにはid属性「#nivoNavi+表示したい画像番号」をtriggerメソッドでクリックします。以下のサンプルでは「#nivoNavi3」となっているので3番目の画像「D」が表示されます。sliderにオプションを設定します。サンプル(fred10/01b.html)を開いてjQueryが以下の様に変更されていることを確認して下さい。自動的に再生されないようにmanualAdvanceプロパティをfalseにして、さらにdirectionNavプロパティもfalseにしてnext/prevボタンを表示しないようにしています。※前述のサンプルfred10/01.htmlでもnext/prevは表示されませんが、これは表示する画像を指定し忘れていたためでした。そのため表示されてないだけでクリックできるので、ここで消しています。true;$('#slider').nivoSlider(nivoObj);また外部から切り替えることができることを確認するためのbutton要素と、button要素をクリックした時のjQueryは削除しました。次項では、このサンプルにcarouFredSelを追加していきます。カルーセルの追加ではcarouFredSelを追加します。サンプル(fred10/02.html)を開いてソースを確認して下さい。前回作成したfred09/04.htmlのカルーセル処理をコピーしています。sliderは切り替わりません。sliderと連結します。サンプル(fred10/03.html)を開いてjQueryの以下の部分を確認して下さい。scrollプロパティ内で設定したonBeforeプロパティの処理(切替前に実行する)に2行追加されています。追加したのは前回紹介した「data.items.visible[3]」を利用して中央のサムネイルのidの値を変数selectIDに代入してアラートで表示する処理です。結果としてカルーセルのサムネイルを切り替える前と最初に1回、中央のサムネイルのid属性の値がアラートで表示されます(最初にt_0と表示されるはずです)。sliderへの操作「#nivoNavi+表示したい画像番号」に利用するだけです。サンプル(fred10/04.html)を開いてonBeforeプロパティに設定した処理が以下の様に変更されていることを確認して下さい。selectID).trigger("click");$(data.items.old[3]).removeClass("nowCenter");}まずサムネイルのid属性の値から数値だけを取り出すために2行目の処理にsplitメソッドを追加しました。これで数値だけが取得できるので、3行目で「#nivoNavi+表示したい画像番号」に利用しています。sliderの画像が切り替わる演出が開始されるようになります。実際にカルーセルを操作して、中央のサムネイルと同じ画像が表示されることを確認して下さい。これまでのサンプルは動作確認しやすいように自動再生をOFFにしていましたが、最後に自動再生をONにしましょう。サンプル(fred10/04b.html)を開いてonBeforeプロパティに設定した処理が以下の様に変更されていることを確認して下さい。".carouNext";autoプロパティをfalseにした設定をコメントアウトしているので(デフォルトの)自動再生モードになります。sliderは「ボタンの連打」に対応していない(演出中の操作は無視されるためcarouFredSelを連打して操作すると、サムネイルと表示される画像がずれてしまいます)。次回この問題を解決したいと思います。