こんにちは。高校生時代に廊下でよくスライディングをしていたため、すねやおしりが常に破れていたナカノマサミツです。

さて、現存するWEBサイトの非常に多くで導入されているもの、それはスライダー。

スライダーさえいれておけば、なんとなくWEBサイトがいい感じに見えてしまうことから導入を希望されるクライアント様も非常に多いです。

さてそんな大人気のスライダーですが、今日では様々なスライダー系のライブラリがあります。有名なところでいうとおそらくスライダーを導入したことがある人なら一度は使ったことがあるであろう「bxSlider」。

他にも「slick」や「FlexSlider 2」なんかもよく使いました。

が！

今回紹介するslider proは正直めっちゃ使いやすいです。一瞬でさくっと導入できるので、少しサイトをいじれるくらいの人でも問題なく導入できてしまいます。

ちなみに当サイトでも一部分で導入していますが、わかりやすくデモページを用意しましたのでよかったら見てみてください。

デモページはコチラ

お、よさそうやんけと思ったあなた！下記より導入方法などの説明もありますので、是非ご一読を！

slider-proの機能

まずこのslider proがなにができるのかってことですが、スライダーをサイト内にいれることができます！って当たり前のところはお　い　と　い　て

このプラグインのいいところは結構レイアウトが自由に組めるところです。

・レスポンシブ対応
・スワイプ対応
・ブレイクポイントを自由に設定できる(画像自体を変更、サムネイルのサイズを変更等)
・高さを自動で調節してくれる
・サムネイルの設定ができる
・画面いっぱいのスライダーもできる

こんな機能が簡単につけられます。

具体的にはデモページを見てもらえればわかりので、是非見てみてください！さあ、いよいよ導入方法です。

slider-proの導入

まずは公式サイトからダウンロード

まずは公式サイトからファイルを一式ダウンロードします。

「Slider Pro」公式サイト

ちょっとわかりづらいですが、リンク先ページの真ん中あたりにある、下記の場所からダウンロードします。

スライダープロをダウンロード

ダウンロードしたらファイルを解凍してください。

ファイルを読み込ませる

ファイルを解凍したら　slider-pro-master > dist > cssの中にあるslider-pro.min.cssと、slider-pro-master > dist > js の中にある、jquery.sliderPro.min.js　を取り出して、読み込ませます。

【CSSの読み込み】

1
<link rel="stylesheet" href="css/slider-pro.min.css"/>

【jQueryとjsファイルの読み込み】

1
2
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery.sliderPro.min.js"></script>

jQueryも一緒に読み込ませてください。

またディレクトリは適宜変更してくださいね！

HTMLの設定

さて、CSSファイルとJSファイルを読み込んだらHTMLの設定です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="slider-pro" id="slider1">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="image01.jpg"/>
        </div>
        <!-- Slide 2 -->
        <div class="sp-slide">
            <img class="sp-image" src="image02.jpg"/>
        </div>
        <!-- Slide 3 -->
        <div class="sp-slide">
            <img class="sp-image" src="image03.jpg"/>
        </div>
        <!-- Slide 4 -->
        <div class="sp-slide">
            <img class="sp-image" src="image04.jpg"/>
        </div>
        <!-- Slide 5 -->
        <div class="sp-slide">
            <img class="sp-image" src="image05.jpg"/>
        </div>
    </div>
</div>

こちらの画像ファイルやディレクトリも適宜変更をお願いします。

そしてjQueryを読み込めば完成です。

1
2
3
4
5
<script>
  $(document).ready(function(){
        $( '#slider1' ).sliderPro();
  });
</script>

うまくいかない場合はディレクトリなどが間違っていることが多いので、今一度確認してください！これでスライダーが動くようになります。

デモページの設定

とはいえデフォルトの設定はちょっと味気ないので、デモページの設定をここに記述します！

基本のスライダー

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="slider-pro" id="slider1">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="img/slider01.jpg"/>
        </div>
        <!-- Slide 2 -->
        <div class="sp-slide">
            <img class="sp-image" src="img/slider02.jpg"/>
        </div>
        <!-- Slide 3 -->
        <div class="sp-slide">
            <img class="sp-image" src="img/slider03.jpg"/>
        </div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  $(document).ready(function(){
        $( '#slider1' ).sliderPro({
width: "600px",
centerImage:true,
slideDistance:10,
visibleSize:"100%",
buttons: false,//ナビゲーションボタン
breakpoints: {
      480: {//表示方法を変えるサイズ
width: "100%",
autoHeight:true,
visibleSize:"100%",
slideDistance:10,
arrows:false,
      }
    }
 
});
  });
</script>

サムネイル付きのスライダー

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="slider-pro" id="slider2">
    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="img/slider01.jpg"/>
        </div>
        <!-- Slide 2 -->
        <div class="sp-slide">
            <img class="sp-image" src="img/slider02.jpg"/>
        </div>
        <!-- Slide 3 -->
        <div class="sp-slide">
            <img class="sp-image" src="img/slider03.jpg"/>
        </div>
</div>
    
<div class="sp-thumbnails">
    <img class="sp-thumbnail" src="img/slider01.jpg"/>
    <img class="sp-thumbnail" src="img/slider02.jpg"/>
    <img class="sp-thumbnail" src="img/slider03.jpg"/>
</div>
</div>

sp-thumbnailsのクラスの部分がサムネイルの画像になります。こちらではスライダーと同じ画像を読み込んでますが、違う画像を読み込むことも可能です！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$( document ).ready(function( $ ) {
  $('#slider2').sliderPro({
    width:600,//横幅
    buttons: false,//ナビゲーションボタン
    shuffle: true,//スライドのシャッフル
    thumbnailWidth: 200,//サムネイルの横幅
    thumbnailHeight: 60,//サムネイルの縦幅
    slideDistance:0,//スライド同士の距離
    breakpoints: {
      480: {//表示方法を変えるサイズ
        thumbnailWidth: 110,
        thumbnailHeight: 40
      }
    }
  });
});
</script>

フルスクリーンのスライダー

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="slider3" class="slider-pro">
  <div class="sp-slides">
    <div class="sp-slide">
      <img class="sp-image" src="img/slider01.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="img/slider02.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="img/slider03.jpg" />
    </div>
   <!--/ sp-slides--></div>
<!--/ full--></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$( document ).ready(function( $ ) {
  $( '#slider3' ).sliderPro({
    width: '100%',//横幅
    arrows: true,//左右の矢印を出す
    buttons: true,//ナビゲーションボタンを出す
    aspectRatio: 1.5,//スライドのアスペクト比
    forceSize: 'fullWindow',//ウィンドウ内全画面表示
    slideDistance:0,//スライド同士の距離
  });
});
</script>

それぞれコピーして、ファイルの場所などによってディレクトリなどを変更してお使いください！

細かいオプションの設定

あとの細かい設定は豊富なオプションがありますので、こちらでお好みの形にカスタマイズしていってください。かなり自由度は高いので、ある程度理想通りのスライダーに仕上がるのではないでしょうか！

豊富なオプション

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
width //横幅を設定。%表示の場合は’’で囲んで設定する。
height //高さの設定をします。
responsive //レスポンシブの設定。trueかfalseで設定します。
aspectRatio //縦横比の設定 初期:-1 ...-1以外に設定すると高さがアスペクト比を維持するための数値となります。
imageScaleMode //画像のスケールモード(background-size的な) 初期:'cover' 選べる値'cover', 'contain', 'exact' and 'none'　
centerImage //画像の中央表示をします。 初期:true
autoHeight //スライダーの高さの調整します。 初期:false
startSlide //スライダーをどの画像で始めるかを選択します。 初期:0
shuffle //スライドをシャッフルして表示します。 初期:false
orientation //スライダーの切り替わりが縦向きか横向きかを選択します。 初期:'horizontal' ...'vertical'
forceSize //スライダーの幅を横幅いっぱいに設定します。 初期:'none' ... 'fullWidth', 'fullHeight' and 'none'
loop //スライドがループします。 初期:true
slideDistance //スライド間の距離(px)を設定します。 初期:10
slideAnimationDuration //スライドのアニメーションの時間を設定します。 初期:700
heightAnimationDuration //高さのアニメーションの時間を設定します。 初期:700
visibleSize //表示しているスライドの前後のスライドを表示し見えるようにする 初期:'auto' ...%で指定
breakpoints //ブレイクポイントの設定 初期:null
fade //フェードを使用するか否か 初期:'false'
fadeOutPreviousSlide //前のスライドがフェードアウトされた時に次のスライドがフェードインする 初期:true
fadeDuration //フェードアニメーションの時間 初期:500
autoplay //自動再生 初期:true
autoplayDelay //自動再生の遅延/間隔の設定(ミリ秒) 初期:5000
autoplayDirection //自動再生の場合にスライドの進む方向  初期:'normal' ...'backwards'
autoplayOnHover //スライドにホバーした際のスライダーの設定(一時停止、ストップ,なし) 初期:'pause' ... 'stop','none'
arrows //矢印ボタンの表示 初期:false
fadeArrows //ホバー時に矢印ボタンを表示する 初期:true
buttons //スライドのページャの表示をする 初期:true
keyboard //キーボードでスライドを動かせるようにする 初期:true
keyboardOnlyOnFocus //スライダーにフォーカスがあるときのみ、キーボード入力に応答するか否かの設定 初期:false
touchSwipe //タッチスワイプをするか否か 初期:true
touchSwipeThreshold //タッチスワイプによるスライドが動く最低限の値を設定 初期:50
fadeCaption //キャプションをフェードさせるか否か 初期:true
captionFadeDuration //キャプションのフェードアニメーション時間の設定 初期:500
fullScreen //フルスクリーンボタンの設定 初期:false
fadeFullScreen //ボタンをホバー時に表示する 初期:true
waitForLayers //レイヤーが消えた後に次のスライドへ行く 初期:false
autoScaleLayers //レイヤーが自動的にスケールする 初期:true
autoScaleReference //レイヤーを縮小する必要がどのくらいかを決定するために、現在のスライド幅と比較される基準幅を設定する。 初期:-1
smallSize //スライドのサイズがこのサイズ未満の場合、スモール版の画像を使用 初期:480
mediumSize //スライドのサイズがこのサイズ未満の場合、ミディアム版の画像を使用 初期:768
largeSize //スライドのサイズがこのサイズ未満の場合、ラージ版の画像を使用 初期:1024
updateHash //新しいスライドが選択されたときにハッシュが更新されるか否か 初期:false
reachVideoAction //映像の要素があるスライドが選択された時に映像のアクションを設定 初期:'none' ...  'playVideo' and 'none'
leaveVideoAction //映像の要素があるスライドから移動するに映像のアクションを設定 初期:'pauseVideo' ... 'stopVideo', 'pauseVideo', 'removeVideo' and 'none'
playVideoAction //映像の再生開始時にスライダーのアクションを設定 初期:'stopAutoplay' ... 'stopAutoplay' and 'none'
pauseVideoAction //映像が一時停止されたときのスライダーのアクションを設定 初期:'none' ... 'startAutoplay' and 'none'
endVideoAction //映像が終了したときのスライダーのアクションを設定 初期:'none' ... 'startAutoplay', 'nextSlide', 'replayVideo' and 'none'
thumbnailWidth //サムネイルの幅の設定 初期:100
thumbnailHeight //サムネイルの高さの設定 初期:80
thumbnailsPosition //サムネイルの位置の設定 初期:'bottom' ... 'top', 'bottom', 'right' and 'left'
thumbnailPointer //ポインタが選択されたサムネイルの表示をするかしないか 初期:false
thumbnailArrows //サムネイルの矢印が有効になるかどうか 初期:false
fadeThumbnailArrows //サムネイルの矢印がフェードインするかどうか 初期:true
thumbnailTouchSwipe //サムネイルのタッチスワイプができるかどうか 初期:true

いかがですか？簡単にスライダーを導入できましたでしょうか？

ぼくは以前はもあっぱらbxSliderを使っていたのですが、最近ではもっぱらこのslider proを利用させてもらってます。皆様にも是非使って気に入っていただけると嬉しいです～（自分がつくったわけではないがｗ）