jQueryプラグインのスライダーの紹介は久しぶりになります。
いつもbxsliderを使っているのですが、それに勝るかもしれないプラグインを発見いたしましたので、
ご紹介させていただきます。
その名も「Slider Pro」公式サイトはこちらSlider Pro
サイト自体もけっこうかっこいいですね！
一応僕が試してみたDEMOもあります。
簡単ですが、特徴としては、
・レスポンシブ対応
・スワイプ対応
・ブレークポイントの設定(画像自体を変更、サムネイルのサイズを変更等)
・高さ自動対応
・サムネイルの設定(縦横サイズ、位置、スワイプ設定)ができる
・フルスクリーンモードにできる
・上記からいろんなレイアウトに簡単に変更できる！
「Slider Pro」の使い方
まずは公式サイトからダウンロードをお願いします！
まずCSSを読み込み、
|
1 | <link rel="stylesheet" href="css/slider-pro.min.css"/> |
次にjavascriptを読み込みます。
headの中でもいいと思うのですが、の前がおすすめのようです。
|
1 2 | <script src="libs/js/jquery-1.11.0.min.js"></script> <script src="dist/js/jquery.sliderPro.min.js"></script> |
次に,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> |
class名つけたほうが良いですね。
ダウンロードしてきたcssに少しスタイルの指定がされています。
htmlをもっと簡単にしたい場合は、cssの設定を独自で変えればもっとスッキリできるかと思います。
そして最後に、jqueryを読み込む記述の後に以下の設定を記述すればOKです！
|
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 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 //横幅を設定。初期:500 ...数値や％で設定・％の場合は'100%'といったように''をつける height //高さを設定。設定の方法はwidthと同じ responsive //レスポンシブか否か 初期:true ...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 |
オプションだけでなく、メソッド、コールバック等もあります。
オプションで設定があるもので、htmlのclass名が特定のものにしないといけないものがありますのでそちらは下記をご覧ください。レイヤー、キャプション、サムネイルなど
ちなみにDEMOの設定は以下になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).ready(function(){ $( '#slider1' ).sliderPro({ width: "80%", height: 500, aspectRatio: 2,//縦横比の設定 arrows: true,//矢印の有無 buttons: true,//ページャーの有無 autoplay: true,//自動スライドか否か loop: true,ループ再生か否か visibleSize: '100%',前後のスライドを表示(?) forceSize: 'fullWidth'幅いっぱいに表示 }); }); |
シンプルでかっこいいスライダーで割りと使い勝手もいいと思います！
