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. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  2. lightgallery.js
  3. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  4. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  5. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  6. Tiny slider

コメント

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

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

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP