raccordion

JavaScript

レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「raccordion」

レスポンシブにも対応しているjQueryプラグインのアコーディオンのイメージスライダー「raccordion」をご紹介します。ブラウザ幅の大きさによってスライダーの大きさが調整されていきます。ちなみにアコーディオンは水平方向にスライドしていくタイプです。レスポンシブなスライダーの1つの候補として覚えておいてもよさそうですね。以下、使い方です。

[ads_center]

使い方

head内にjQueryとダウンロードしたプラグインファイルを読み込みます。

<link href="css/raccordion.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="js/jquery.raccordion.js" type="text/javascript"></script>
<script src="js/jquery.animation.easing.js" type="text/javascript"></script>

その後に、スライダーをセットします。スピードやスライダーの幅、高さなどを指定します。

<script type="text/javascript">
$(window).load(function () {
    $('#accordion-wrapper').raccordion({
        speed: 1000,
        sliderWidth: 940,
        sliderHeight: 300,
        autoCollapse: false
    });
}); 
</script>

続いて、HTMLで画像を記述していきます。アコーディオン全体をdiv#accordion-wrapperで内包して、各スライダーをdiv.slideで括っていきます。キャプションを入れる場合は、div.captionの部分を記述していきます。

<div id="accordion-wrapper">
    <!-- 画像01 -->
    <div class="slide">
        <img src="images/img01.jpg" />
        <div class="caption">
            <a href="#">
                <h1>imgage-01</h1>
            </a>
            <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
        </div>
    </div>

    <!-- 画像02 -->
    <div class="slide">
        <img src="images/img02.jpg" />
        <div class="caption">
            <a href="#">
                <h1>imgage-02</h1>
            </a>
            <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
        </div>
    </div>

    <!-- 画像03 -->
    <div class="slide">
        <img src="images/img03.jpg" />
        <div class="caption">
            <a href="#">
                <h1>imgage-03</h1>
            </a>
            <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p>
        </div>
    </div>

    (・・・中略・・・)

</div>

オプションのspeedでは、最初に各スライダーを均等に表示させる時間を調整することができます。さらに詳しいオプションに関しては公式サイトをご確認下さい。

ということで、レスポンシブに対応したアコーディオンのイメージスライダー「raccordion」のご紹介でした。以下からダウンロードすることができます。

SCOSCHEのMicro & Mini USB充電用ケーブルカラビナにもなるSCOSCHEのMicro & Mini USB充電用ケーブル「USBMM3」がお洒落前のページ

Macで現在開いているファイルのフォルダ階層を確認する方法次のページMacのフォルダ階層を確認

関連記事

  1. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  2. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. jQuery Pretty Dropdowns
  5. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  6. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP