便利でオシャレなjQueryスライドショー「Slider Pro」の紹介！スマホにも対応！

・スマホ対応でフリック、スワイプで画像を切り替えられるスライダーがほしい
・ドラックで移動できるスライダーがほしい
・jQueryで簡単にできるおしゃれなスライダーがほしい

こんな人のためにこの記事を作ってみました！だいぶ昔からあるライブラリなので、今更感はありますが、大事なものは紹介していきます。

前置きは置いておいて、まずはサンプルをご覧ください！！

サンプルとサンプルソース

サンプル

デモ

[1ページ目]テキストテキストテキストテキスト

[2ページ目]テキストテキストテキストテキスト

[3ページ目]テキストテキストテキストテキスト

[4ページ目]テキストテキストテキストテキスト

[5ページ目]テキストテキストテキストテキスト

[6ページ目]テキストテキストテキストテキスト

空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！

サンプルソース

ライブラリは自分でダウンロードして読み込ませてください。（「公式からダウンロードしてね」の部分です）

HTML / JavaScript / jQuery / css 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>

  <!--   jQuery・bootstrapライブラリ読み込み -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!--  /jQuery・bootstrapライブラリ読み込み -->


<!--  公式からダウンロードしてね  -->
<script src="https://appsol-one.com/custom/sliderPro/jquery.sliderPro.min.js" type="text/javascript" defer=""></script>
<link rel="stylesheet"  href="https://appsol-one.com/custom/sliderPro/slider-pro.css" type="text/css" >
<!-- /公式からダウンロードしてね  -->


</head>
<body>

<!-- サムネイル付きスライドショー  -->
<div id="slider-area" class="slider-pro">
<div class="sp-slides">
  <div class="sp-slide">
    <img class="" src="https://appsol-one.com/custom/00-img/y1.jpg" />
    <p class="h5 sp-layer sp-black sp-padding"
    data-position="bottomCenter" data-height="100px"
    data-width="100%" data-show-transition="up" data-hide-transition="down">
    [1ページ目]テキストテキストテキストテキスト
    </p>
  </div>
  <div class="sp-slide">
    <img class="" src="https://appsol-one.com/custom/00-img/y2.jpg" />
    <p class="sp-layer sp-black sp-padding"
    data-position="bottomCenter" data-height="100px"
    data-width="100%" data-show-transition="up" data-hide-transition="down">
    [2ページ目]テキストテキストテキストテキスト
    </p>
  </div>
  <div class="sp-slide">
    <img class="" src="https://appsol-one.com/custom/00-img/y3.jpg" />
    <p class="sp-layer sp-black sp-padding"
    data-position="bottomCenter" data-height="100px"
    data-width="100%" data-show-transition="up" data-hide-transition="down">
    [3ページ目]テキストテキストテキストテキスト
    </p>
  </div>
  <div class="sp-slide">
    <img class="" src="https://appsol-one.com/custom/00-img/y4.jpg" />
    <p class="sp-layer sp-black sp-padding"
    data-position="bottomCenter" data-height="100px"
    data-width="100%" data-show-transition="up" data-hide-transition="down">
    [4ページ目]テキストテキストテキストテキスト
    </p>
  </div>
  <div class="sp-slide">
    <img class="" src="https://appsol-one.com/custom/00-img/y5.jpg" />
    <p class="sp-layer sp-black sp-padding"
    data-position="bottomCenter" data-height="120px"
    data-width="100%" data-show-transition="up" data-hide-transition="down">
    [5ページ目]テキストテキストテキストテキスト
    </p>
  </div>
  <div class="sp-slide">
    <img class="" src="https://appsol-one.com/custom/00-img/y6.jpg" />
    <p class="sp-layer sp-black sp-padding"
    data-position="bottomCenter" data-height="100px"
    data-width="100%" data-show-transition="up" data-hide-transition="down">
    [6ページ目]テキストテキストテキストテキスト
    </p>
  </div>
</div><!--/ sp-slides-->

<div class="sp-thumbnails">
  <div class="sp-thumbnail thumbnail-div" >
    <img class="" src="https://appsol-one.com/custom/00-img/y1.jpg" />
  </div>
  <div class="sp-thumbnail thumbnail-div" >
    <img class="" src="https://appsol-one.com/custom/00-img/y2.jpg" />
  </div>
  <div class="sp-thumbnail thumbnail-div" >
    <img class="" src="https://appsol-one.com/custom/00-img/y3.jpg" />
  </div>
  <div class="sp-thumbnail thumbnail-div" >
    <img class="" src="https://appsol-one.com/custom/00-img/y4.jpg" />
  </div>
  <div class="sp-thumbnail thumbnail-div" >
    <img class="" src="https://appsol-one.com/custom/00-img/y5.jpg" />
  </div>
  <div class="sp-thumbnail thumbnail-div" >
    <img class="" src="https://appsol-one.com/custom/00-img/y6.jpg" />
  </div>
</div><!--/ thumb-h-->
</div>
<script type="text/javascript">
$(function(){
    $('#slider-area').sliderPro({
    width:800,//横幅
    height:500,//横幅
    buttons: false,//ナビゲーションボタン
    autoScaleLayers: false,//キャプションの自動変形
    waitForLayers: true,//キャプションのアニメーションが終了してからスライドするか
    autoplay:false,//自動再生
    thumbnailPointer: true,//アクティブなサムネイルにマークを付ける
    thumbnailWidth: 180,//サムネイルの横幅
    thumbnailHeight: 120,//サムネイルの縦幅
    arrows: true,//左右の矢印
    slideDistance:0,//スライド同士の距離
    breakpoints: {
      480: {
        //表示方法を変えるサイズ
      }
    }
    });
  });
</script>
<style>
  /*サムネイルのポインターの色を変える*/
  .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before,
  .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    border-color: #c7c7c7;
  }
  .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    border-bottom: 13px solid #c7c7c7;
  }
  .sp-slide p{font-size:18px !important;}
  i
  .sp-previous-arrow:before, .sp-previous-arrow:after, .sp-next-arrow:before, .sp-next-arrow:after {background-color: #6d6666;}

  .img-slider-pro{
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  #slider-area .thumbnail-div{
    width: 100%;
    height: 80%;
    text-align: center;
    border: solid 1px #bbbbbb;
  }
  img{max-width:100%;}

</style>
 
</body>
</html>

公式サイト

公式サイトはこちらです。
http://bqworks.com/slider-pro/

導入方法

１、ライブラリをダウンロード

以下からライブラリを取得します。
https://github.com/bqworks/slider-pro/archive/master.zip

２、必要なライブラリを取得

ライブラリの中から、以下を抽出しましょう！

\sliderPro\slider-pro-master\dist\js\jquery.sliderPro.min.js
\sliderPro\slider-pro-master\dist\css\slider-pro.min.css
\sliderPro\slider-pro-master\dist\css\imagesフォルダ

３、ソース作成

\sliderPro\slider-pro-master\dist\js\jquery.sliderPro.min.js
\sliderPro\slider-pro-master\dist\css\slider-pro.min.css

この二つを読み込み、当ページのサンプルソースを使えば、完成です！

\sliderPro\slider-pro-master\dist\css\imagesフォルダは「slider-pro.min.css」と同じ階層に置いてください。

特徴

・レスポンシブ対応
・スマホのフリックでも画像変更可能
・ドラッグでも画像変更可能
・サムネイルと画像の連動が可能
・画像にもサムネイルにも文章を記載することが可能（キャプション可能）
・ライセンスはMITなので、商用利用可能です。

とにかくサクッと実装出来て、おしゃれでフリック・ドラッグ対応というところは強いです。

スライダー・スライドショーのライブラリはたくさんありますが、フリック・ドラッグに対応しているのはそこまで多くない印象です。

また、サムネイルと連動していたり、そのサムネイルも横での羅列だけでなく、縦方向での羅列表示にも対応しているところはすごいです。正直、脱帽です。

そして、一番驚きなのは、オプションの豊富さですね。
以下、一部ですが、本当にたくさんあります。幅や高さなどの基本的なところはもちろんありますし、シャッフルしたり、ループさせる/させないもオプションで決めることができます。なんて充実してるんでしょうか！

ライブラリのオプション（一部）

width
横幅を設定。数値や％で指定する。％の場合は’100%’といったようにシングルクォートをつける。初期値：500

height
高さを設定。設定の方法はwidthと同じ。初期値：300

responsive
レスポンシヴに対応する。初期値：true

aspectRatio
縦横の比率の設定。「-1」以外にするとスライダーの高さがアスペクト比を維持するための基準の数値となる。初期値：-1

imageScaleMode
画像のスケールモード。
‘cover’、’contain’、’exact’、’none’から指定する。初期値：’cover’

centerImage
画像を中央表示にする。初期値：true

autoHeight
スライダーの高さの自動調整。初期値：false

startSlide
何枚目のスライドからスタートするか。初期値：0

shuffle
スライドをシャッフルする。初期値：false

orientation
スライダーの動きを縦か横かに設定。’horizontal’または’vertical’で選択。
初期値：’horizontal’

forceSize
スライダーの幅を全幅もしくはブラウザ幅で固定する。’fullWidth’、’fullHeight’、’none’から選択。
初期値：’none’

loop
ループさせる。初期値：true

slideDistance
スライド間の距離。ピクセルで指定。初期値：10

slideAnimationDuration
各スライドのアニメーションに要する時間。初期値：700

heightAnimationDuration
高さのアニメーションに要する時間。初期値：700

visibleSize
表示しているスライドの前後のスライドを表示する。
初期値：’auto’

breakpoints
ブレイクポイントの設定。初期値：null

サンプルとソース２（サムネイル縦）

ライブラリは自分でダウンロードして読み込ませてください。（「公式からダウンロードしてね」の部分です）

<!--  公式からダウンロードしてね  -->
<script src="/custom/sliderPro/jquery.sliderPro.min.js" type="text/javascript" defer=""></script>
<link rel="stylesheet"  href="/custom/sliderPro/slider-pro.css" type="text/css" >
<!-- /公式からダウンロードしてね  -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


<div id="thumb-v" class="slider-pro">
  <div class="sp-slides">
    <div class="sp-slide">
     <img class="" src="https://picsum.photos/800/700" />
    </div>
    <div class="sp-slide">
      <img class="" src="https://picsum.photos/800/700" />
    </div>
    <div class="sp-slide">
      <img class="" src="https://picsum.photos/800/700" />
    </div>
    <div class="sp-slide">
      <img class="" src="https://picsum.photos/800/700" />
    </div>
    <div class="sp-slide">
      <img class="" src="https://picsum.photos/800/700" />
    </div>
  <!--/ sp-slides--></div>
  <div class="sp-thumbnails">
    <img class="sp-thumbnail"  src="https://picsum.photos/800/700" />
    <img class="sp-thumbnail"  src="https://picsum.photos/800/700" />
    <img class="sp-thumbnail"  src="https://picsum.photos/800/700" />
    <img class="sp-thumbnail"  src="https://picsum.photos/800/700" />
    <img class="sp-thumbnail"  src="https://picsum.photos/800/700" />
  </div>
<!--/ thumb-v--></div>


<script type="text/javascript">
$(function(){
  $('#thumb-v').sliderPro({
    width: 600,//横幅
    orientation: 'vertical',//スライドの方向
    arrows: true,//左右の矢印
    buttons: false,//ナビゲーションボタン
    loop: false,//ループ
    thumbnailsPosition: 'right',//サムネイルの位置
    thumbnailPointer: true,//アクティブなサムネイルにマークを付ける
    thumbnailWidth: 200,//サムネイルの横幅
    thumbnailHeight: 80,//サムネイルの縦幅
  });
});
</script>



<style>
  /*サムネイルのポインターの色を変える*/
  .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before,
  .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    border-color: #c7c7c7;
  }
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{ border-right: 13px solid #c7c7c7;}
  
  
  .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
    border-bottom: 13px solid #c7c7c7;
  }
  .sp-slide p{font-size:18px !important;}

/*縦スライド時の矢印の位置*/
.sp-vertical .sp-previous-arrow {
  top: 0;
}
.sp-vertical .sp-next-arrow {
  bottom: 0;
}
</style>

よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！

前の記事

アイキャッチ_おすすめプラグイン
【厳選3選】ブログ（WordPress）始めた時に最低限入れる…

次の記事

コピペ実装可！jQueryマルチセレクトボックス「Select…