[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider

シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。
キーボード操作やスワイプ操作、そしてマニュアル操作にも対応!

デモのキャプチャサイトのキャプチャ

Unslider
Unslider -GitHub

Unsliderの特徴

  • オープンソース
    ライセンスは「WTFPL」で、個人・商用問わずどんな風に使ってもOK。
  • 超軽量
    スクリプトは6KBで、超軽量です。
  • 実装は簡単でクリーンなHTML
    数分で実装でき、非常にシンプルでValidなHTML。
  • スライドの方向は多彩
    通常の水平方向は左右どちらにも順向きで対応、垂直方向のスライドも可。
  • レスポンシブ対応
    デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。
  • キーボード操作の対応
    キーボード(矢印キー)での操作をサポートします。
  • スワイプ操作の対応
    jQuery.event.swipeをサポートしているので、スワイプ操作にも対応可能です。
  • クロスブラウザ対応
    IE9を含む、すべてのモダンブラウザで動作します。

Unsliderのデモ

デモでは、Unsliderを使ったさまざまなスライドを楽しめます。

デモのキャプチャ

Unslider: Demos
デフォルトのシンプルなスライダー、自動でスライドするスライダー

デモのキャプチャ

Unslider: Demos
垂直方向のスライダー

デモのキャプチャ

Unslider: Demos
アニメーションを伴ったスライダー

デモのキャプチャ

Unslider: Demos
マニュアル操作のスライダー(スライドの番号やfirst, lastを入力)

Unsliderの使い方

Step 1: 外部ファイル

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

スワイプ操作対応の場合は、スクリプトを追加します。

Step 2: HTML

各スライドをリストで実装し、それをdivなどで内包します。

Step 3: JavaScript

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

オプションは非常に豊富で、下記ページをご覧ください。

サイトのキャプチャ

Unslider: Options

top of page

©2017 coliss