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

サイト構築 -JavaScript

Post on:2013年3月19日

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              // レスポンシブ対応の有無
});