2014.6.2.Mon. 07:25
コンテンツや画像等を自動的に、あるいはナビゲーションのクリックによって、スライドショーのようにスクロールさせる事が出来るスクリプトを紹介します。
<head>
〜</head>
内にて、「jquery-xxx.min.js」「jquery.carouFredSel-xxx-packed.js」を外部ファイルとして読み込みます。
(xxx … バージョンの数値)
<script type="text/javascript" src="jquery-xxx.min.js"></script>
<script type="text/javascript" src="jquery.carouFredSel-xxx-packed.js"></script>
1.の記述より下・</head>
より上の箇所に、<script type="text/javascript">
〜</script>
にてオプション設定を記述します(詳細は後述)。
2.で設定したIDを含めてマークアップします。
IDの振られた要素の直接の子要素がスクロールするようになります、その為以下のソースは一例になります。
なお、最も外側の<div>
には、任意でクラス名やIDを振って構いません。
<div>
<div id="carousel">
<img src="xxx.jpg">
<img src="yyy.jpg">
<img src="zzz.jpg">
</div>
</div>
<div>
<div id="carousel">
<div>
<h1>サンプル</h1>
<p>サンプルサンプルサンプル</p>
</div>
<div>
<h1>テスト</h1>
<p>テストテストテスト</p>
</div>
<div>
<h1>ダミー</h1>
<p>ダミーダミーダミー</p>
</div>
</div>
</div>
<div>
<ul id="carousel">
<li>サンプル</li>
<li>テスト</li>
<li>ダミー</li>
</ul>
</div>
最も外側の<div>
に、CSSでwidth
を設定し、子要素が任意の数だけ表示されるように調節します。
また、実際にスクロールする事になる要素がブロック要素の場合は、要素を横並びさせる為に、該当箇所にfloat:left;
を設定する必要もあります(併せてclearfix等の処理もお忘れなく)。
<script type="text/javascript">
<!--
$(function(){
$('#carousel').carouFredSel();
});
//-->
</script>
最低限、上記のようなIDの設定が必須です。
<script type="text/javascript">
<!--
$(function(){
$('#carousel1').carouFredSel();
$('#carousel2').carouFredSel();
});
//-->
</script>
また上記のように、$(function(){
〜});
に、IDの定義を複数設定する事も出来ます。
<script type="text/javascript">
<!--
$(function(){
$('#carousel').carouFredSel({
/* something */
});
});
//-->
</script>
オプションを追記するにあたっては上記のように、carouFredSel(
〜);
に、{
}
の追記が必要になります。
以下、必要に応じてcarouFredSel({
〜});
に、,
で区切りながらオプションを列挙していきます。
auto : false
自動でスクロールしないようになります。
ナビゲーションやページャーと併用しましょう。
prev : '#prev'
next : '#next'
<span id="prev">≪prev</span>
<span id="next">next≫</span>
指定のIDが振られているタグがprev・nextのナビゲーションになります。
pagination : "#pager"
<div id="pager"></div>
指定のIDが振られているタグの箇所にページャーが表示されるようになります。
空タグになるのが忍びない場合には­
等を入れておくといいでしょう。
なおページャーのリンクのうち、現在表示されているページに相当する<a>
には、自動的にselected
というクラス名が付加されます。
auto : {
progress : '#progress'
}
<div id="progress"></div>
指定のIDが振られているタグの箇所にプログレスが表示されるようになります。
空タグになるのが忍びない場合には­
等を入れておくといいでしょう。
<style type="text/css">
<!--
div#progress
{
width:0;
height:5px;
background-color:#999999;
}
-->
</style>
併せて上記のようにCSSを設定しておくとプログレスが分かりやすく可視化されます。
items : n
1回に表示させる要素の個数を指定します。
例えばABCDEという要素がスクロールするカルーセルにおいてitems : 3
と指定すると、最初にABC・次にDEA・その次にBCD…というように表示されるようになります。
scroll : {
fx : "crossfade"
}
要素が切り替わる際に、クロスフェードが適用されるようになります。
responsive : true
スクロール対象の要素の横幅がレスポンシブに対応するようになります。
他にも膨大な数の項目を設定出来ますが、上述の項目だけでも十分に機能的なカルーセルを実現させる事が出来ます。
<div id="pager"></div>
ページャーを上記のようなソースで記述すると、ブラウザ上では動的に下記のようなイメージのソースが出力されます。
<div id="pager">
<a href="#" class="selected">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
この1,2,3…と通し番号で表示されるページャーを、CSSを利用して、画像による表示に差し替える方法を紹介します。
実際にはそのような表示に対応出来るオプションが存在しているのかもしれませんが、正直よく分からないので敢えてCSSのみで対応してみましょう。
div#pager a
{
display:inline-block;
width:30px;
height:30px;
background-image:url(mark_off.gif);
text-indent:-9999px;
}
div#pager a.selected
{
background-image:url(mark_on.gif);
}
上記のように指定すると、アクティブなリンクにはONの画像、それ以外のリンクにはOFFの画像が表示されるようになります。
仕組みとしては、display:inline-block;
でリンクに縦横幅を設定出来るようにし、text-indent:-9999px;
で通し番号のデバイステキストを表示範囲外に飛ばして見えなくさせ、画像をリンクの背景として表示させています。
画像のパスやwidth
・height
の数値は適宜変更して下さい。
div#pager a
{
display:inline-block;
width:100px;
height:75px;
text-indent:-9999px;
background-size:cover;
}
div#pager a:nth-child(1) {background-image:url(xxx.jpg);}
div#pager a:nth-child(2) {background-image:url(yyy.jpg);}
div#pager a:nth-child(3) {background-image:url(zzz.jpg);}
ON/OFFの画像を表示させる方法の応用で、各画像のサムネイルを表示させる事も出来ます。
a:nth-child(n)
でn番目のリンクに表示させる画像をそれぞれ指定し、background-size:cover;
で背景画像の縦横幅をリンクの縦横幅に合うサイズに縮小して表示させます。
リンクの数だけ背景画像の指定を列挙する為、あまりスムーズなやり方ではないかもしれませんが、しかし感覚的には分かりやすい方法でもあります。
以下のリンクから、「carouFredSel」の動作サンプルをダウンロード出来ます。
「carouFredSel」そのものは再配布に該当する為に同梱していませんので、お手数ですが配布元サイトより各自でダウンロードして下さい。