※本記事は2013年時点のもので、「carouFredSel」は現在WordPressの有料プラグイン化している模様です。

「カルーセル」って言葉、どうしてもアノ人を思い浮かべちゃいます。。

というのは置いといて、

jQueryのナイスなカルーセル

上記サムネイルは旧イメージです。
carouFredSel作者のサイト
http://www.frebsite.nl

が個人的にお気に入りなので、設置方法備忘録っす。
まあ、定番っすヨね。

ちなみに、見た目の参考はこんなカンジ↓

※設置はしませんヨ、本家サイトにいいサンプルがたくさん掲示されてまーす。

このカルーセルのいいところは、豊富なオプションがあるところ。
縦横だとかスライドスピードだとかスワイプ・スクロールの制御等の動作オプションがいろいろあります。

では、手っ取り早い設置法を。

<script src="jquery.js"></script>
<script src="jquery.carouFredSel-packed.js"></script>

ヘッダにまあ、スクリプトを読むと。
”jquery.carouFredSel-packed.js”は、余分なスペース等を圧縮したモノになってます。

で、スクリプトの呼び込みfunctionは例として、

$(function(){
$("要素名").carouFredSel({
	circular: false, //tureでON
	infinite: false, //tureでON
	auto:     true, //falseでOFF
	prev: {
		button	: "#carousel_prev",
		key	: "left"
	},
	next: {
		button	: "#carousel_next",
		key	: "right"
	}
});
});

オプションは、単純なスライダーのための最低限を記載しましたが、先述の“オプション”をfunction内のプロパティに追加すれば、さまざまな表示ギミックが制御可能です。

つぎ、HTMLはこう並べて記載するだけ。

<div id="要素名">
<img alt="" src="画像1">
<img alt="" src="画像2">
<img alt="" src="画像3">
</div>

画像はただ順番に並べるだけ。

スタイルシートは適時合わせるってことで、例えば、

要素名 {
	padding: 5px 0 5px 40px;
	position: relative;
}
要素名 img {
	padding: 7px;
	margin: 3px;
	display: block;
	float: left;
}

こんなカンジで。
”float”　コレは必要。あとは適当で問題なし。

スライド用ボタンをつけるなら、こんなカンジで出来るよん。

<div>
<a id="carousel_prev" href="#">PREV</a>
<a id="carousel_next" href="#">NEXT</a>
</div>

aタグにidをそれぞれ、「carousel_prev」「carousel_next」と振ればOK。
これは、上記の要素とは別枠で置いて下さい。

LightBoxとの組み合わせも当然可能。
ただし、ページが重くなりがちになるので、どこまでカルーセルのギミックを使うかはポイントですね。
レスポンシブサイトに取り入れる場合なんかは特にです。

ちなみにFancyBoxを使うならば、

$("要素名 a").fancybox({
    cyclic  : true, //自動スライドさせない場合はfalse
    onStart : function() { //上記がtureの場合、有効
        $("要素名").trigger("pause");
    },
    onClosed: function() {
        $("要素名").trigger("play");
    }
});

以上のような流れで実装できます。
ポップアップしてる画像をクリックすることで自動スライドさせたりさせなかったりできます。

とにかくこのcarouFredSel、オプションとしての制御事項が豊富で、特にスマホやタブレットPCのための表示ギミックに最適です。

• 
• 
• 

タグ: jQuery