BOOK Studio947
狩野祐東・狩野さやか著書

サンプル06-05-aへの回答

#2314
狩野 祐東
キーマスター

笠井さんこんにちは。

カルーセルに限りませんが、一般的に、右向き矢印(>や→)は「次へ」を意味します。このサンプルの場合は「(いま見えていない)次の画像へ」という意味になるので、サンプルどおりの動作で正しいと言えます。左向き矢印(<や←)も同様で「前の画像へ」ということになります。が、矢印の向きとは反対に動くので、なんだか混乱しますよね。

考え方の参考になるように、同じような動きの別の例を挙げておきます。WindowsやMacのウィンドウにあるスクロールバーは、実際にスクロールしたいものとは反対方向に動いています。たとえばこのページの下の方を見たいと思ってスクロールしたとき、スクロールバーはたしかに下に動きますが、ページ自体は上の方に移動します。カルーセルの動きも実はそれと同じなのです。

ちなみにこのサンプルのスクロールの方向は、jQueryプログラムを少し変えるだけで試せます。「06-05-a」フォルダの「scripts」フォルダ内の「myplugin.js」を開いて、次の部分を書き換えてみてください。スクロールの方向を変えてみて、どう感じるか試してみるのもよいでしょう。

$.fn.extend({


















...
.on('click', 'a.prev', function(event){
	event.preventDefault();
	doCarousel($(this), -1); //もともと1だったところを-1に書き換える
})
.on('click', 'a.next', function(event){
	event.preventDefault();
	doCarousel($(this), 1); //もともと-1だったところを1に書き換える
});
...