jQueryプラグイン「Slider Pro」がめちゃ便利！　特徴、使い方、使用例まで紹介

著者 Nora
日付
カテゴリー チュートリアル
タグ ,,
jQueryプラグイン「Slider Pro」
jQueryプラグイン「Slider Pro」
テーマ「ShapeShifter」で使用できるウィジェット「Slide Gallary」で使用している無料のjQueryプラグイン「Slider Pro」を紹介します。 以前、背景をスライドさせるjQueryプラグイン「Vegas」を紹介しましたが、こちらは指定した要素をスライドさせることが出来、特徴が大きく異なります。 当サイトの「フロントページ」にもサンプルとして表示させています。「Slider Pro – Elegant and Professional Sliders」の方がサンプルが豊富ですので、「Slider Pro」でどんなスライダーが作れるのか見ておくと良いと思います。 先に書いておきますが、ウィジェット「ShapeShifter Slide Gallary」の作り方ではありません。こちらは管理画面でのフォームがちょっと面倒ですので、いちいち解説していると、このページの文字数が偉いことになりますから。 ※ 「sliderpro」が含まれない新テーマへの以降のため、現在デモスライダーは機能していません。
  • Table of Contents

「Slider Pro」の特徴

プラグイン「Slider Pro」を使えば、スクリーンショットやリンク先のサンプルのようなスライダーが簡単に作成できます。 当サイトで表示させているのはウィジェットで、既に「ウィジェットの作り方の解説が面倒だ」と書いたのですが、面倒なのは管理画面での設定部分のみで、出力部分のみであれば非常にシンプルです。 主な特徴としては、
  • レスポンシブ対応
  • フルウィンドウ
  • サムネイル
  • 画像の読み込み遅延
  • 動画対応（Youtube・Vimeo・HTML5・Video.js・SublimeVideo・JW Player）
などが挙げられますが、クラスを与えて「スライド要素」・「イメージ」・「キャプション」・「レイヤー」・「サムネイル」などを指定して、スタイルも付けることが出来ますし、データ属性値で要素の出力位置などの設定も可能です。 このように便利な機能が豊富ですので、僕が「Slider Pro」を選んだ理由を列挙していきます。

プロパティやメソッドが豊富

参照ページが「Modules」と「JavaScript API」の２つあります。 「Modules」の方は主にHTMLの書き方です。用意されているクラスやデータ属性の種類などが紹介されています。「JavaScript API」の方は、スライダーのプロパティの他、「Slider Pro」のメソッドも参照できます。

サムネイルをコントロールボタンに出来る

スクリーンショットにもあるように、スライドされる要素ではなく、コントロールにサムネイルを簡単に設置できます。 実は「Modules」ページで紹介されているクラス「sp-thumbnail」を与えて、JSでプロパティ設定するだけです。 サイズも簡単に設定できますからめちゃ楽です。

レスポンシブ対応

プロパティ値の初期値として自動でレスポンシブ対応してくれます。これは何のプロパティ設定をしなくても対応していて、敢えて解除することも出来ます。 また、プロパティ「breakpoints」を設定すれば、リサイズした時にウィンドウの横幅（px単位）が指定した数値になると、プロパティ値を変更されるように設定出来ます。 パソコンでのウィンドウのリサイズもそうですが、モバイル端末を横にした時なども変化しますから、柔軟な表示が可能で便利なんですよ。

「Slider Pro」の使い方

使い方もそうですが、当サイトも「ShapeShifter」を使用していますので、実際にここに直接書いてスライダーを表示してみようと思います。 順を追って説明していきますので、まずは「bqworks/slider-pro（GitHub）」でZIPファイルをダウンロードしてファイルを展開してください。

CSS・JSファイルをインクルード

必要なファイルは「dist/css/slider-pro.min.css」、それから「jQuery」と「dist/js/jquery.sliderPro.min.js」です。 
<!-- CSS -->
<link rel="stylesheet" href="dist/css/slider-pro.min.css"/>

<!-- JS -->
<script src="libs/js/jquery-1.11.0.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>
ワードプレスなら「wp_enqueue_style」と「wp_enqueue_scripts」で出力しましょう。 「jQuery」のバージョンはこれ以外でも大丈夫だと思います。実際に僕はバージョン「2.1.X」を使用しています。 「Zepto」は未確認です。すみません、僕使っていないもんですから。

HTMLの書き方

基本的な形として、 
全体のラッパー「slider-pro」 
  > 全スライド「sp-slides」 
    > 各スライドアイテム「sp-slide」
という形でHTMLを書いていきます。 以下は、ダウンロードページから「HTMLマークアップのサンプル」を引用したものです。 
<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>
「sp-slide」内には、「sp-image」や「sp-layer」といったクラスを持つ要素を使い、各スライドの表示を設定できます。クラス「sp-image」を持ったイメージは背景となり、クラス「sp-layer」はテキストなどを出力するのに便利なクラスで、データ属性値を与えることでスタイルも設定可能です。 この他、サムネイルを使用したい場合は、 
全体のラッパー「slider-pro」 
  > 全スライド「sp-slides」 
    > 各スライドアイテム「sp-slide」
  > 全サムネイル「sp-thumbnails」
    > 各サムネイル「sp-thumbnail」
もしくは、 
全体のラッパー「slider-pro」 
  > 全スライド「sp-slides」 
    > 各スライドアイテム「sp-slide」
      > 各スライドのコンテンツ「sp-image」「sp-layer」など
      > 各スライドのサムネイル「sp-thumbnail」
と言った形で出力することで、スクリーンショットのようにコントロールにサムネイルを使用できます。 方法は２通りありますが、ワードプレスなどでループ処理する場合は後者の方が手間が省けますし、大きく異る点もあります。 実際に両方で出力してみますので、違いを確認してみてください。

プロパティを設定してコール

では、実際に出力してみます。 CSSなどスタイルを殆ど何も設定していませんので、雑な出力になりますが、２通りの出力の違いが分かれば良いと思います。 まずは、 
<div id="slider-pro-sample-1" class="slider-pro" style="background-color: #eeeeee;">

  <div class="sp-slides">

    <!-- Slide 1 -->
    <div class="sp-slide">
     <img class="sp-image" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png" width="100%" height="100%"/>
    </div>

    <!-- Slide 2 -->
    <div class="sp-slide">
      <img class="sp-image" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png" width="100%" height="100%"/>
      <p class="sp-layer sp-padding sp-white" data-horizontal="5%" data-vertical="5%">Lorem ipsum dolor sit amet</p>
    </div>

    <!-- Slide 3 -->
    <div class="sp-slide">
      <p class="sp-layer sp-padding sp-white" data-horizontal="5%" data-vertical="5%">Lorem ipsum dolor sit amet</p>
      <p class="sp-layer sp-padding sp-black" data-position="centerLeft" data-horizontal="5%" data-vertical="5%">consectetur adipisicing elit</p>
    </div>

  </div>

  <div class="sp-thumbnails">

    <img class="sp-thumbnail" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png"/>

    <p class="sp-thumbnail">Thumbnail 2</p>

    <div class="sp-thumbnail">
      <img class="sp-thumbnail-image" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png" width="100" height="80"/>
      <p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
    </div>

  </div>

</div>
<script>
jQuery( document ).ready( function( $ ) {
  // 直接書いているので、念のため５秒ずらしています。通常はコメントアウトしている方で大丈夫です。
  setTimeout(
    function() {
      $( '#slider-pro-sample-1' ).sliderPro({
        'thumbnailPointer': true,
        'thumbnailArrows': true,
      });
    },
    5000
  );
  /*$( '#slider-pro-sample-1' ).sliderPro({
    'thumbnailPointer': true,
    'thumbnailArrows': true,
  });*/
});
</script>
という形で、「sp-slides」と「sp-thumbnails」に分けて書いたものです。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

consectetur adipisicing elit

Thumbnail 2

Tempor incididunt ut labore et dolore magna

次は、 
<div id="slider-pro-sample-2" class="slider-pro" style="background-color: #eeeeee;">

  <div class="sp-slides">

    <!-- Slide 1 -->
    <div class="sp-slide">
      <img class="sp-image" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png" width="100%" height="100%"/>
      <img class="sp-thumbnail" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png"/>
    </div>

    <!-- Slide 2 -->
    <div class="sp-slide">
      <img class="sp-image" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png" width="100%" height="100%"/>
      <p class="sp-layer sp-padding sp-white" data-horizontal="5%" data-vertical="5%">Lorem ipsum dolor sit amet</p>
      <p class="sp-thumbnail">Thumbnail 2</p>
    </div>

    <!-- Slide 3 -->
    <div class="sp-slide">
      <p class="sp-layer sp-padding sp-white" data-horizontal="5%" data-vertical="5%">Lorem ipsum dolor sit amet</p>
      <p class="sp-layer sp-padding sp-black" data-position="centerLeft" data-horizontal="5%" data-vertical="5%">consectetur adipisicing elit</p>
      <div class="sp-thumbnail">
        <img class="sp-thumbnail-image" src="https://wp-works.com/wp-content/uploads/2016/03/hook-881438_1280.png" width="100" height="80"/>
        <p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
      </div>
    </div>

  </div>

</div>
<script>
jQuery( document ).ready( function( $ ) {
  // 直接書いているので、念のため５秒ずらしています。通常はコメントアウトしている方で大丈夫です。
  setTimeout(
    function() {
      $( '#slider-pro-sample-2' ).sliderPro({
        'thumbnailPointer': true,
        'thumbnailArrows': true,
      });
    },
    5000
  );
  /*$( '#slider-pro-sample-2' ).sliderPro({
    'thumbnailPointer': true,
    'thumbnailArrows': true,
  });*/
});
</script>
という形で、「sp-slide」内にサムネイルも書いた場合です。

Lorem ipsum dolor sit amet

Thumbnail 2

Lorem ipsum dolor sit amet

consectetur adipisicing elit

Tempor incididunt ut labore et dolore magna

「sp-thumbnail」はコピペしただけですが、前者はサムネイルをクリックしても該当するスライドに移動しませんが、「sp-slide」内に「sp-thumbnail」を含む後者は、サムネイルをクリックすると該当するスライドに移動してくれます。 個人的には断然後者がオススメです。

ワードプレス用プラグイン

実は有料で「Slider Pro – Responsive WordPress Slider Plugin」というプラグインが存在します。 Youtube動画の紹介を見ましたが、予め設定しておいたスライダーを、ショートコードでコンテンツ内やテキストウィジェットなど、あらゆる箇所にスライダーを出力できてしまう優れものです。 類似するプラグインなら自分で作れそうな気はするんですが、そこまでクオリティの高さは保証できませんし、「Slider Pro」作者のサポートがあるのは大きいですよね。

テーマ「ShapeShifter」での使用法

現在はウィジェットでのみ使用していますが、その使用方法についてです。 ワードプレスの管理画面に関しては触れませんので大丈夫です。 「Slider Pro」はレスポンシブ対応ですが、テーマ「ShapeShifter」ではどのウィジェットエリアに配置されるか分かりませんので、プロパティ「breakpoints」があまり役に立ちません。 そこでラッパーの親要素の横幅を取得し、それによってプロパティ値を設定しています。 だいぶ端折りますが、書くとこんな感じです。 
$( '.slider-pro-wrapper-class' ).each( function( index ) {

  wrapperWidth = $( this ).parent().width();

  var properties;  

  if( wrapperWidth <= 320 ) {
    properties = {
      'width': wrapperWidth,
      ....
    };
  } else if( wrapperWidth <= 640 ) {
    ...
    ...
    ...
    ...
    ...
    ...
  }

  $( this ).sliderPro( properties );

});
あとは、スタイルを上手いこと設定すれば、配布元のサンプルページのように綺麗に表示させることが出来るんじゃないでしょうか？ ともあれ、参考になれば幸いです。 追記（2016/04/20）：　最後に「Slider Pro」の別のサンプルとして、「新着投稿一覧」をスライドさせておきます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。