[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro

Post on:2014年11月19日

デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。
今必要とされるさまざまな機能を備えています。

「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。

サイトのキャプチャ

Slider Pro
Slider Pro -GitHub

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種類のスライダーを楽しめます。
操作は、デスクトップのクリックやドラッグ、キーボードの矢印キー、スマホのタップやスワイプに対応しています。

デモのキャプチャ

デモ 1

下部にナビゲーションを配置したスライダーで、各スライドの要素はレイヤーごとに異なるアニメーションでスライドします。

デモのキャプチャ

デモ 2

カルーセルタイプのスライダーで、下部のビュレットでスライドするだけでなく、ドラッグやスワイプにも対応しています。

デモのキャプチャ

デモ 3

フルスクリーン表示に対応したスライダー。右上をクリックしてみてください。

デモのキャプチャ

デモ 4

テキストや画像やビデオなど、さまざまなコンテンツに対応したスライダー。

デモのキャプチャ

デモ 5

右サイドのサムネイルには、自動送り機能も備わっています。

Slider Proの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <link rel="stylesheet" href="dist/css/slider-pro.min.css"/>
</head>
<body>
  ...
  <script src="libs/js/jquery-1.11.0.min.js"></script>
  <script src="dist/js/jquery.sliderPro.min.js"></script>
</body>

Step 2: HTML

基本的には各スライドをdivで実装し、各スライドを内包するラッパーを用意します。

<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="path/to/image1.jpg"/>
        </div>

        <!-- Slide 2 -->
        <div class="sp-slide">
            <p>Lorem ipsum dolor sit amet</p>
        </div>

        <!-- Slide 3 -->
        <div class="sp-slide">
            <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
            <p class="sp-layer">consectetur adipisicing elit</p>
        </div>
    </div>
</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スライダーの設定をします。

<script type="text/javascript">
    jQuery( document ).ready(function( $ ) {
        $( '#my-slider' ).sliderPro();
    });
</script>

実装の詳しい情報は、下記ページをご覧ください。

sponsors

top of page

©2024 coliss