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. Inspiration for Menu Hover Effects
  2. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

  3. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

  4. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

  5. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

コメント

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

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP