JavaScript

レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.js」を使ってみた

スマホにも対応したレスポンシブのjQueryスライダー「Responsly.js」を使ってみました。結構使いやすくていい感じです。ダイナミックなイメージスライダーやテキストなんかもスライドさせることができるので多様な使い方ができそうですね。以下使い方です。

[ads_center]

使い方

以下のサイトからダウンロードできます。

まずはhead内にCSSファイルを読み込みます。

<link rel="stylesheet" href="slidy/slidy.css">

そして、終了body直前にjQuery本体とプラグインのJSファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="slidy/slidy.js"></script>
<script>
$('.slidyContainer').slidy();
</script>

マークアップは各スライドさせる要素をfigureで内包します。

<div id="slidyBanner" class="slidyContainer" title="sample">
    <div class="slidySlides">
        <!-- スライド1 -->
        <figure class="slidyCurrent">
            <img src="images/img01.jpg">
            <figcaption>image</figcaption>
        </figure>
        <!-- スライド2 -->
        <figure>
            <img src="images/img02.jpg">
            <figcaption>image</figcaption>
        </figure>
        <!-- スライド3 -->
        <figure>
            <div>
                <h3>sampletitle</h3>
                <p>sampletext sampletext sampletext sampletext sampletext sampletext </p>
                <p>sampletext sampletext sampletext sampletext sampletext sampletext </p>
            </div>
        <figcaption>text</figcaption>
        </figure>
    </div>
</div>

キャプションをつけたい場合はfigcaptionでつけることができます。

デモではこんな感じになります。

Responsly.js 01

レスポンシブなのでiPhoneで見てもちゃんとサイズが調整されます。

Responsly.js 02

figureとfigcaptionで括るところがおもしろいですね。オプションでは自動スライドやインターバルのスピードなんかも設定できます。

$('.slidyContainer').slidy({
    showArrows: true, // 矢印ナビを表示/非表示
    useKeybord: true, // キーボードでの操作
    auto: true, // 自動スライド
    interval: 5000, // 各スライド間隔の時間
    initialInterval: 700 // 1番最初のスライド間隔の時間
});

オプションは上記以外にもあります。intervalとinitialIntervalはautoがtrueになっている場合に有効になります。各スライドの間隔の時間はintervalで、1番最初にスライドする時間を設定するのはinitialIntervalです。

関連記事

  1. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  2. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  3. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  4. Playful Little Tooltip Ideas
  5. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  6. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

コメント

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

  1. 2012年 4月 27日
    トラックバック:4月26日の注目記事 | Javable.Jp

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP