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」のご紹介でした。以下からダウンロードすることができます。

関連記事

  1. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  3. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  4. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  6. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

コメント

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

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

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP