[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider

シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。
デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応!

サイトのキャプチャ

Unslider
Unslider -GitHub

Unsliderの特徴

  • 超軽量のオープンソース
    スクリプトは3KBと超軽量のオープンソースです。
  • 実装は簡単でクリーン
    HTMLは非常にシンプルで、カスタマイズも容易です。
  • 高さの調整
    サイズに合わせて、スライダーの高さを自動調整します。
  • レスポンシブ対応
    デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。
  • キーボード操作の対応
    キーボード(矢印キー)での操作をサポートします。
  • スワイプ操作の対応
    jQuery.event.swipeをサポートしているので、スワイプ操作にも対応可能です。
  • クロスブラウザ対応
    IE9を含む、すべてのモダンブラウザで動作します。

Unsliderのデモ

デモはIE9を含め、モダンブラウザでご覧ください。

スライダーは自動再生でスライドされ、中央下部のサークル状のナビゲーションでも操作できます。
キーボードの矢印キーの操作にも対応しています。

サイトのキャプチャ

デモページ:幅1,200pxで表示

レスポンシブ対応でブラウザの表示サイズを変更すると、スライダーのサイズが最適化されます。また、高さも自動で最適化されます。

サイトのキャプチャ

デモページ:幅780pxで表示

スマフォサイズだと、こんな感じです。

サイトのキャプチャ

デモページ:幅480pxで表示

Unsliderの使い方

Step 1: 外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

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

スワイプ操作にも対応させる場合は、「jQuery.event.swipe」を加えます。

<script src="//stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
<script src="//stephband.info/jquery.event.swipe/js/jquery.event.swipe.js"></script>

Step 2: HTML

HTMLは非常にシンプルで、各スライドをリストで実装しdivで囲みます。
スライドを追加する時は、リストを増やしてください。

<div class="banner">
    <ul>
        <li>スライド 1</li>
        <li>スライド 2</li>
        <li>スライド 3</li>
    </ul>
</div>

Step 3: CSS

スライダーのスタイルは自由に加えたり、削除できます。
最低限必要なスタイルは、下記の2つです。

.banner { position: relative; overflow: auto; }
.banner ul { list-style: none; }

Step 4: JavaScript

jQueryのセレクタでラッパーのdivを指定し、スクリプトを実行します。

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

スクリプトのオプション

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

top of page

©2017 coliss