JavaScript

jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

jQueryプラグインで画面のサイズによってレイアウトを合わせてくれるレスポンシブなスライダー「Elastislide」を使ってみました。カルーセルタイプのスライダーなので結構使う機会がありそうな感じです。アイディア次第で色んな用途に応用が効きそうですね。iPhoneでも確認してみたところ、ちゃんとレイアウトも調整されてスライダーも動作しました。ということで以下、使い方です。

[ads_center]

Elastislideの使い方

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

デモもあります。

使い方はとても簡単です。まずはダウンロードしたファイルを読み込みます。最初にhead内にCSSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/elastislide.css" />

あとは</body>の直前にJSを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">
    $('#carousel').elastislide({
        imageW: 180,
        minItems: 5
    });
</script>

head内に読み込みたい場合は$で括ればいいかと思います。

<script type="text/javascript">
$(function(){
    $('#carousel').elastislide({
        imageW: 180,
        minItems: 5
    });
});
</script>

次にHTMLです。

<div id="carousel" class="es-carousel-wrapper">
    <div class="es-carousel">
        <ul>
            <li><a href="#"><img src="images/sample01.jpg" alt="sample01" /></a></li>
            <li>...</li>
               …
        </ul>
    </div>
</div>

これだけで簡単に実装できます。わかりやすくていいですね。オプションも色々あるので変えてみるとおもしろいです。実際のブラウザではこんな感じに表示されます。

Elastislide ブラウザ確認

画面サイズを縮小してみると。

Elastislide ブラウザ確認 縮小

ちゃんと画面に合わせて調整されますね。ちなみにiPhoneでも見てみるとこのようになります。

Elastislide ブラウザ確認 iPhone

ちゃんと最適化されて表示されますね。

オプション

オプションではスライドするスピードや画像の横幅なんかを指定できます。

$('#carousel').elastislide({
    speed: 200,
    easing: 'easeInBack',
    imageW: 180,
    margin: 3,
    border: 2,
    minItems: 1,
    current: 0,
    onClick: function() { return false; }
});
speed
スライドする時のスピードです。値を高くすると遅くなり、低くすると速くなります。
easing
デフォルトでは特に指定されてないんですが、ここをeaseInBackと指定すると一瞬バックしてからスライドするようになります。
imageW
画像を表示する時の横幅を指定できます。
margin
画像の右側のマージンを指定でき、間隔を調整することができます。
border
画像まわりのボーダーの太さを変更できます。
minItems
画面のサイズを小さくした時に最小限表示させる画像の数を決めることができます。
current
ページを読み込んだ時に何番目の画像から表示させるかを指定できます。0から開始されます。
onClick
要素をクリックした時のコールバックを指定することができます。

ということで、なかなかいい感じのスライダーかと思います。

VMware FusionにインストールしたCentOSのネットワーク設定前のページ

Photoshopで超簡単にストライプ(ボーダー)をサクっと作るやり方次のページストライプ-ボーダー

関連記事

  1. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  2. jQuery Tags Input

    JavaScript

    シンプルでお洒落なタグを入力することができるjQueryプラグイン「jQuery Tags Inpu…

    とても便利で面白いjQueryプラグインがあったのでご紹介します。シン…

  3. FixedContent.js

    JavaScript

    モバイルフレンドリーなコンテンツ固定のjQueryプラグイン「FixedContent.js」

    FixedContent.jsはスクロールしてもコンテンツを固定してく…

  4. jQuery Social Share Bar
  5. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  6. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

コメント

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

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP