【更新履歴】
2013年02月22日 WordPressへの使い方追加
2013年09月05日 トップイメージによく使うオプションcrossfadeを追加
jQueryプラグインのダウンロード
Circular, Responsive jQuery Carousel – CarouFredSel （機械日本語訳はこちら）
上記サイトよりプラグインをダウンロードして下さい。
「jquery.carouFredSel-*.*.*.js」もしくは「jquery.carouFredSel-*.*.*-packed.js」がプラグイン本体です。「packed」の方は、余計な改行を全て抜いたバージョンです。お好きな方を読み込んで下さい。
サンプル
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.carouFredSel-6.1.0.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#bnrLarge").carouFredSel({
width: 480, //表示する幅
height: 360, //表示する高さ
align: "left",
items: 1, //表示する数
direction: "left", //方向 up,down,right,left
scroll : {
items: 1, //スクロールする個数
duration: 200, //スクロールにかかる時間(ms)
fx: "scroll",
pauseOnHover: true //マウスオーバーでスクロール停止
},
auto: 6000 //切り替わる間隔(ms)
});
$("#bnrLarge_crossfade").carouFredSel({
width: 480, //表示する幅
height: 360, //表示する高さ
align: "left",
items: 1, //表示する数
direction: "left", //方向 up,down,right,left
scroll : {
items: 1, //スクロールする個数
duration: 2000, //スクロールにかかる時間(ms)
fx: "crossfade",
easing: "swing",
pauseOnHover: true //マウスオーバーでスクロール停止
},
auto: 4000 //切り替わる間隔(ms)
});
$("#left").carouFredSel({
width: 1000, //表示する幅
height: 120, //表示する高さ
align: "left",
items: 5, //表示する数
direction: "left", //方向 up,down,right,left
scroll : {
items: 1, //スクロールする個数
duration: 200, //スクロールにかかる時間(ms)
fx: "scroll",
pauseOnHover: true //マウスオーバーでスクロール停止
},
auto: 3000 //切り替わる間隔(ms)
});
$("#right").carouFredSel({
width: 1000, //表示する幅
height: 120, //表示する高さ
align: "left",
items: 5, //表示する数
direction: "right", //方向 up,down,right,left
scroll : {
items: 2, //スクロールする個数
duration: 200, //スクロールにかかる時間(ms)
fx: "scroll",
pauseOnHover: true //マウスオーバーでスクロール停止
},
auto: 4000 //切り替わる間隔(ms)
});
$("#down").carouFredSel({
width: 155, //表示する幅
height: 1000, //表示する高さ
align: "down",
items: 5, //表示する数
direction: "down", //方向 up,down,right,left
scroll : {
items: 1, //スクロールする個数
duration: 400, //スクロールにかかる時間(ms)
easing : "elastic",
pauseOnHover: true //マウスオーバーでスクロール停止
},
auto: 5000 //切り替わる間隔(ms)
});
});
</script>
<style type="text/css">
div {
overflow: hidden;
}
div img {
float: left;
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>jQueryカルーセルプラグイン CarouFredSel サンプル</h1>
<h2>スクロール方向:左向き 表示数:1</h2>
<div id="bnrLarge">
<img src="480x360/img_airwave_ver03.jpg" width="480" height="360" />
<img src="480x360/img_google_ajax_feed_api_blogs.jpg" width="480" height="360" />
<img src="480x360/img_google_feed_api.jpg" width="480" height="360" />
<img src="480x360/img_imac_2013.jpg" width="480" height="360" />
<img src="480x360/img_iphone5s.jpg" width="480" height="360" />
<img src="480x360/img_rt_ranking.jpg" width="480" height="360" />
</div>
<h2>クロスフェード 表示数:1</h2>
<div id="bnrLarge_crossfade">
<img src="480x360/img_airwave_ver03.jpg" width="480" height="360" />
<img src="480x360/img_google_ajax_feed_api_blogs.jpg" width="480" height="360" />
<img src="480x360/img_google_feed_api.jpg" width="480" height="360" />
<img src="480x360/img_imac_2013.jpg" width="480" height="360" />
<img src="480x360/img_iphone5s.jpg" width="480" height="360" />
<img src="480x360/img_rt_ranking.jpg" width="480" height="360" />
</div>
<h2>スクロール方向:左向き 表示数:5 スクロール数:1</h2>
<div id="left">
<img src="155x116/img_airwave_ver03.jpg" width="155" height="116" />
<img src="155x116/img_google_ajax_feed_api_blogs.jpg" width="155" height="116" />
<img src="155x116/img_google_feed_api.jpg" width="155" height="116" />
<img src="155x116/img_imac_2013.jpg" width="155" height="116" />
<img src="155x116/img_iphone5s.jpg" width="155" height="116" />
<img src="155x116/img_rt_ranking.jpg" width="155" height="116" />
<img src="155x116/img_twitter.jpg" width="155" height="116" />
</div>
<h2>スクロール方向:右向き 表示数:5 スクロール数:2</h2>
<div id="right">
<img src="155x116/img_airwave_ver03.jpg" width="155" height="116" />
<img src="155x116/img_google_ajax_feed_api_blogs.jpg" width="155" height="116" />
<img src="155x116/img_google_feed_api.jpg" width="155" height="116" />
<img src="155x116/img_imac_2013.jpg" width="155" height="116" />
<img src="155x116/img_iphone5s.jpg" width="155" height="116" />
<img src="155x116/img_rt_ranking.jpg" width="155" height="116" />
<img src="155x116/img_twitter.jpg" width="155" height="116" />
</div>
<h2>スクロール方向:下向き 表示数:5 スクロール数:2</h2>
<div id="down">
<img src="155x116/img_airwave_ver03.jpg" width="155" height="116" />
<img src="155x116/img_google_ajax_feed_api_blogs.jpg" width="155" height="116" />
<img src="155x116/img_google_feed_api.jpg" width="155" height="116" />
<img src="155x116/img_imac_2013.jpg" width="155" height="116" />
<img src="155x116/img_iphone5s.jpg" width="155" height="116" />
<img src="155x116/img_rt_ranking.jpg" width="155" height="116" />
<img src="155x116/img_twitter.jpg" width="155" height="116" />
</div>
</body>
</html>
jQueryプラグイン CarouFredSel デモ
このようにオプションの設定により、さまざまな動作をさせる事が可能です。便利です！
5-6行目 プラグインの読み込み
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.carouFredSel-6.1.0.js"></script>
このようにjQueryの本体の後で、CarouFredSelを読み込んで下さい。
7-86行目 オプションの設定
$("要素名").carouFredSel({
width: 480, //表示する幅
height: 360, //表示する高さ
align: "left",
items: 1, //表示する数
direction: "left", //方向 up,down,right,left
scroll : {
items: 1, //スクロールする個数
duration: 200, //スクロールにかかる時間(ms)
fx: "scroll",
pauseOnHover: true //マウスオーバーでスクロール停止
},
auto: 6000 //切り替わる間隔(ms)
});
オプションの設定は覚え切れないほどたくさんありますが、上のサンプル程度であれば、このくらい設定すれば可能です。他のオプションは、公式ページを参考にして下さい。
Configuration – CarouFredSel （機械日本語訳はこちら）
Configuration – robot （機械日本語訳はこちら）
公式サイトには、質問に答えていくだけで、オプションのスクリプトを組んでくれる、Configuration robotのページがあります。機械日本語訳でも何となく内容がわかると思います。
87-95行目 CSS
div {
overflow: hidden;
}
div img {
float:left; //フロートをつける
display:block; //ブロック要素でないタグはブロック化
}
【ポイント】
ブラウザに画像を読み込んだ際に、一瞬だけ画像が大きくはみ出して並んでしまう現象が起きる場合があります。それを防止するために、overflow: hidden;を入れています。
スライドさせる要素はフロート化して、ブロック要素出ない場合はブロック化して下さい。サンプルはブラウザのバグ防止に、vertical-align:bottom;を入れています。
100-151行目 html
公式サイトの説明では、下記のようにイメージタグを並べても使えますし、リストタグでも使えます。今回のサンプルではイメージタグを使いました。
<div id="foo">
<img src="img1.jpg" width="300" />
<img src="img2.jpg" width="300" />
<img src="img3.jpg" width="300" />
<img src="img4.jpg" width="300" />
<img src="img5.jpg" width="300" />
<img src="img6.jpg" width="300" />
<img src="img7.jpg" width="300" />
<img src="img8.jpg" width="300" />
</div>
<ul id="foo">
<li> c </li>
<li> a </li>
<li> r </li>
<li> o </li>
<li> u </li>
<li> F </li>
<li> r </li>
<li> e </li>
<li> d </li>
<li> S </li>
<li> e </li>
<li> l </li>
</ul>
<div id="foo">
<div>
<h3>Infinity</h3>
<p>A concept that in many fields refers to a quantity without bound or end.</p>
</div>
<div>
<h3>Circular journey</h3>
<p>An excursion in which the final destination is the same as the starting point.</p>
</div>
<div>
<h3>jQuery</h3>
<p>jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>
</div>
<div>
<h3>Carousel</h3>
<p>A carousel is an amusement ride consisting of a rotating circular platform with seats.</p>
</div>
</div>
このCarouFredSelを使えば、お手軽にカルーセル（スライド）を作る事ができます。切り替えを早めに設定すると、キビキビ動いてなかなか良い感じです。
他にもこのプラグインでは、カルーセルを動かすコントローラーも簡単につけられるようです。そちらはまだ試した事がないのですが、また挑戦したいと思います。
あとWordPressにCarouFredSelを使いたいのですが、まだ動かせていません。どうも読み込む位置が問題なようです。改良してうまくできたらまた報告します！
【追記：2013年2月22日】
WordPressでも使えました。<?php wp_head(); ?>の後ろにjquery.carouFredSel-6.1.0.jsなど読み込むと使えます。
