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. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  2. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  3. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

  4. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  5. no-image
  6. Philter

    JavaScript

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

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

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP