十字架ラビアンローズ

カルーセルスクリプト「carouFredSel」で、基本的なカルーセルとそのカスタマイズを実現する為の詳細な解説を行っています。

  1. トップページ
  2. Webサイト構築
  3. JavaScript
  4. 汎用性の高いカルーセルスクリプト「carouFredSel」

汎用性の高いカルーセルスクリプト「carouFredSel」

2014.6.2.Mon. 07:25

コンテンツや画像等を自動的に、あるいはナビゲーションのクリックによって、スライドショーのようにスクロールさせる事が出来るスクリプトを紹介します。

「carouFredSel」の導入ステップ

  1. <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>
    
  2. 1.の記述より下・</head>より上の箇所に、<script type="text/javascript"></script>にてオプション設定を記述します(詳細は後述)。

  3. 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>
    
  4. 最も外側の<div>に、CSSでwidthを設定し、子要素が任意の数だけ表示されるように調節します。
    また、実際にスクロールする事になる要素がブロック要素の場合は、要素を横並びさせる為に、該当箇所にfloat:left;を設定する必要もあります(併せてclearfix等の処理もお忘れなく)。

「carouFredSel」のオプション設定

基本

<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が振られているタグの箇所にページャーが表示されるようになります。
空タグになるのが忍びない場合には&shy;等を入れておくといいでしょう。
なおページャーのリンクのうち、現在表示されているページに相当する<a>には、自動的にselectedというクラス名が付加されます。

プログレス表示

auto : {
progress : '#progress'
}

<div id="progress"></div>

指定のIDが振られているタグの箇所にプログレスが表示されるようになります。
空タグになるのが忍びない場合には&shy;等を入れておくといいでしょう。


<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

スクロール対象の要素の横幅がレスポンシブに対応するようになります。

他にも膨大な数の項目を設定出来ますが、上述の項目だけでも十分に機能的なカルーセルを実現させる事が出来ます。

ページャーの表示をCSSでアレンジする


<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;で通し番号のデバイステキストを表示範囲外に飛ばして見えなくさせ、画像をリンクの背景として表示させています。
画像のパスやwidthheightの数値は適宜変更して下さい。


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」そのものは再配布に該当する為に同梱していませんので、お手数ですが配布元サイトより各自でダウンロードして下さい。

  • index.html … 「carouFredSel」の動作サンプルページ
  • style.css … 「index.html」用CSSファイル
  • img/ 以下 … スクロール対象の写真画像6点、ON/OFFアイコン画像1点

動作サンプルダウンロード

Twitter

アーカイブ

全記事アーカイブ