カルーセルの動きに合わせてコンテンツ表示を切り替える
前のページの作業で縦型カルーセルの実装が終わったので、今度はカルーセルの動きに合わせてコンテンツ部分を切り替える機能を追加します。jCarouselライブラリにはそうした機能はありませんので、ちょっと工夫して自前で作ってしてみましょう。
まず、カルーセルの矢印がクリックされたら表示内容を再設定するため、現在表示されているコンテンツの番号（ここでは説明の都合上、ページ番号とします）を示す変数 pageNo を用意します。この変数の値を↑ボタンがクリックされたら1つ減らし、対応するページ番号のコンテンツを表示します。同時に、以下のスクリプトで表示中以外のページ番号のコンテンツを非表示にします。
$(".reviewPage").hide(); // 全て非表示にする
$(".reviewPage").eq(pageNo).show(); // 該当するページを表示する
jQueryではメソッドチェーン（関連記事）により、これらの処理を1行にまとめられます。実際には以下のように書きます。
$(".reviewPage").hide().eq(pageNo).show();
場合によっては↑ボタンがクリックされ続けることもあります。そこで、ページ番号がマイナスにならないように、 if() を使って調整します。
if (pageNo < 0) { pageNo = 0; }
↓ボタンの場合も同様の処理を書きます。今度は、 $(".reviewPage").length でページ数を求め、最大ページ数を超えないようにします。
if (pageNo > $(".reviewPage").length-1) { pageNo = $(".reviewPage").length-1; }
これでできあがりといきたいところですが、このままではページが読み込まれた直後に左側に何も表示されません。そこで、 $(".reviewPage:first").show(); として最初の書評だけ表示されるようにします。
var pageNo = 0;
$(".reviewPage:first").show();
$("#bookmenu").jcarousel({ vertical: true, scroll : 1 });
$(".jcarousel-prev").click(function(){
pageNo--;
if (pageNo < 0) { pageNo = 0; }
$(".reviewPage").hide().eq(pageNo).show();
});
$(".jcarousel-next").click(function(){
pageNo++;
if (pageNo > $(".reviewPage").length-1) { pageNo = $(".reviewPage").length-1; }
$(".reviewPage").hide().eq(pageNo).show();
});
自前で追加したスクリプトは、前回作成した「booknavi.js」に書き足して保存します。HTMLのヘッダーに、「jquery-1.2.3.js」「jquery.jcarousel.pack.js」「booknavi.js」の3つを読み込むように<script>タグを設定したら完成です。
<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/booknavi.js"></script>
完成した作例。右側のカルーセルを操作すると、左側のメインコンテンツ（書評）の表示も切り替わります
カルーセルを横型にしたり、表示する件数を増やしたり、カスタマイズも簡単にできます。作例をもとにいろいろと試してみるといいでしょう。それでは、また次回。
（作例デザイン：wataru）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
