JavaScript

レスポンシブに対応している軽量のjQueryスライダー「Unslider」

とても軽量でレスポンシブにも対応しているjQueryスライダー「Unslider」がよさそうだったのでメモしときます。マークアップも使い方もとてもシンプルだし、約3KBという軽さが魅力的ですね。スライドのスピードやキーボード操作もオプションで設定することができます。

[ads_center]

使い方

レスポンシブということで、実際にブラウザサイズを変更して確認してみました。以下は通常時↓

Unsliderをブラウザで確認

ブラウザサイズを縮小↓

レスポンシブに対応

ちゃんとレスポンシブに対応されていますね。ということで、以下、使い方です。

jQueryとプラグインを読み込みます。

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.min.js"></script>

HTMLをマークアップしてきます。余分なマークアップは一切なく、シンプルに以下のように記述できます。

<div class="banner">
    <ul>
        <li>slide1</li>
        <li>slide2</li>
        <li>slide3</li>
    </ul>
</div>

スライダーに必要なCSSも追加しておきます。

.banner {
    position: relative;
    overflow: auto;
}

.banner li {
    list-style: none;
}
.banner ul li {
    float: left;
}

あとはUnsliderをセットするだけです。

$(function() {
    $('.banner').unslider();
});

オプション

オプションを指定する場合は以下のように指定します。

$('.banner').unslider({
    speed: 500, // スピード
    delay: 3000, // スライド間隔
    complete: function() {},// スライドアニメーション後のコールバック関数
    keys: true, // キーボード操作
    dots: true, // ナビゲーション
    fluid: false // レスポンシブデザイン
});

必要最低限の機能もちゃんと揃っていますね。自分でちょっとしたカスタマイズをしたい場合には便利です。

ということで、レスポンシブに対応している軽量のjQueryスライダー「Unslider」の使い方でした。ダウンロードや詳しい内容に関しては以下の公式サイトをご確認ください。

Lightroomで色収差を除去しても取り除けなかった偽色を補正する前のページ

iPhone定番人気の天気予報アプリの「そら案内」を使ってみた次のページiPhoneの天気予報アプリ「そら案内」

関連記事

  1. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  2. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  3. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  5. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  6. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP