[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
Post on:2014年11月19日
sponsorsr
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。
今必要とされるさまざまな機能を備えています。
「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。
Slider Proの特徴
Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。
デフォルトの5タイプのスライダー
機能は非常に豊富です。
- さまざまなデバイスのスクリーンに対応
-
- デフォルトで完全にレスポンシブ対応（デモ全て）
- タッチ・スワイプ操作に対応（デモ全て）
- ブレイクポイントの設定（デモ 1, 5）
- 滑らかで美しいアニメーション
-
- CSS3アニメーション（デモ全て）
- レイヤーアニメーション対応（デモ 1, 3, 4）
- フェードエフェクト（デモ 3）
- レイアウトのオプション
-
- カルーセル（デモ 2）
- 無限スクロール（デモ全て、5は一部）
- 100%表示とフルウインドウ表示（デモ 2）
- 異なるサイズの画像にも対応
- 高さの自動補正（デモ 4）
- オリエンテーションのカスタマイズ（デモ 5）
- 画像のロードの最適化
-
- Lazy Load対応（デモ全て）
- スクリーンサイズごとに異なる画像ファイルを表示（デモ 3）
- Retinaディスプレイ対応（デモ全て）
- ナビゲーション
-
- サムネイルは画像でもテキストでも両方でも可（デモ 1, 3, 5）
- キーボード操作に対応（デモ全て）
- スライドからスライドへのリンクも可能（デモ 4）
- その他
-
- モジュール式のアーキテクチャ
- 高性能なAPI
- ビデオコンテンツ対応（デモ 4）
- ナビゲーションなどの要素はCSSでカスタマイズ可（画像の使用は無し）
- フルスクリーン表示（デモ 3）
- Lightboxのサポート（デモ 2, 4）
Slider Proのデモ
デモではデフォルトで用意されている5種類のスライダーを楽しめます。
操作は、デスクトップのクリックやドラッグ、キーボードの矢印キー、スマホのタップやスワイプに対応しています。
下部にナビゲーションを配置したスライダーで、各スライドの要素はレイヤーごとに異なるアニメーションでスライドします。
カルーセルタイプのスライダーで、下部のビュレットでスライドするだけでなく、ドラッグやスワイプにも対応しています。
フルスクリーン表示に対応したスライダー。右上をクリックしてみてください。
テキストや画像やビデオなど、さまざまなコンテンツに対応したスライダー。
右サイドのサムネイルには、自動送り機能も備わっています。
Slider Proの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。
[html]
...
...
[/html]
Step 2: HTML
基本的には各スライドをdivで実装し、各スライドを内包するラッパーを用意します。
[html]
[/html]
Step 3: JavaScript
ラッパーをjQueryのセレクタで指定し、スライダーの設定をします。
[javascript]
[/javascript]
実装の詳しい情報は、下記ページをご覧ください。
sponsors
