> JavaScript/jQuery > レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」
レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

画像をスライドショー化するjQueryプラグインは様々ありますが、今回はレスポンシブデザインにも対応し、スライドをスワイプすることができる「Slider Pro」をご紹介します。

Slider Proとは

Slider Proは、画像をスライドショーで表示するjQueryプラグインです。
主な特徴は以下のとおりです。

  • 豊富なデザイン(スライドの表示方法は6種類のデザインから選択できます。)
  • レスポンシブデザインに対応
  • 画像をスワイプ可能(スマートフォンやタブレット表示時に操作が楽)
  • 高さ自動設定
  • フルスクリーン対応可能
  • 商用利用可能

レスポンシブ対応していることはもちろんありがたいですが、特に、画像を掴んで前後にスライドできる「スワイプ」が可能なのは非常に有意義だと思います。

DEMO

ダウンロード方法

下記のサイトからスクリプトをダウンロードしてください。

Slider Pro公式サイト
GitHub|Slider Pro - jQuery Slider Plugin 

利用方法

headタグ内

<link rel="stylesheet" href="./css/slider-pro.min.css" type="text/css" media="all" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.sliderPro.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function( $ ) {
        $( '#slide' ).sliderPro({});
    });
</script>

最低限動かすためには上記スクリプトで十分ですが、SlideProには様々なオプションがあるので、そちらを是非利用してみてください。
DEMO画面で利用しているスクリプトは以下のとおりです。

サムネイルなしの場合の記述例

    <script type="text/javascript">
        $( document ).ready(function( $ ) {
            $( '#slide1' ).sliderPro({
                width: '750px',
                aspectRatio: 1.5,      //アスペクト比
                arrows: true,          //矢印の有無
                buttons: true,         //ページャーの有無
                autoplay: true,        //自動スライドか否か
                loop: true,            //ループ再生か否か
                visibleSize: '100%',   //前後のスライドを表示
                forceSize: 'fullWidth' //幅いっぱいに表示
            });
        });
    </script>

サムネイルありの場合の記述例

    <script type="text/javascript">
        $( document ).ready(function( $ ) {
        $( '#slide2' ).sliderPro({
            width: '750px',
            height: '500px',
            arrows: true,          //矢印の有無
            thumbnailWidth: 200,   //サムネイルの横幅
            thumbnailHeight: 100,  //サムネイルの高さ
            thumbnailPointer: true,//ポインタが設定されたサムネイルの表示
            autoplay: true,        //自動スライドか否か
        });
        });
    </script>

オプションについての詳細

詳しいオプションについては下記サイトを参考にしてください

bodyタグ内の記述例

基本的な記述方法は下記の通りです。

<div id="slide1" class="slider-pro">
    <div class="sp-slides">
        <div class="sp-slide">
            <a href="#slide1"><img class="sp-image" src="./back1.jpg" alt="サンプル" /></a>
        </div>
        <div class="sp-slide">
            <a href="#slide1"><img class="sp-image" src="./back2.jpg" alt="サンプル" /></a>
        </div>
        <div class="sp-slide">
            <a href="#slide1"><img class="sp-image" src="./back3.jpg" alt="サンプル" /></a>
        </div>
        <div class="sp-slide">
            <a href="#slide1"><img class="sp-image" src="./back4.jpg" alt="サンプル" /></a>
        </div>
    </div>
</div>

スライドショー自体のブロック要素にID(#slide1)を付与しています。
このIDはスクリプト側でスライドショーを開始するのにも利用します。

スライドのブロックに[sp-slide]、スライドのブロック内の画像に[sp-image]というクラスをそれぞれ付与しています。
画像へリンクを貼ることもできます。

サムネイルを表示させたい場合は、DEMO画面を参考にしてください。

CMSでの利用について

Wordpressで利用する場合は、有料版のプラグインを検討してもよいかもしれません。
I'll be NETでも利用している国産CMS「freo」を 利用する場合も、メディア一括表示プラグインバナー付きリンクプラグインを利用してサムネイル・キャプション込のスライドショーを作成可能です。 

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)