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

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  2. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  3. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  4. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  5. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  6. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

コメント

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

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

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP