「こいつ何を言ってんだ・・・。」と思われても仕方ないタイトルですが、jQuery UI Sliderを使ってスライド切り替えを行うというただのネタ記事です。やってみたかっただけです。
スライダーというと画像やコンテンツをスライドして切り替えるものを思い浮かべる人が多いと思いますが、jQuery UI Sliderはツマミを移動して値を変更するUIのことです。
こういうやつです。
今回はこのjQuery UI Sliderを使ってスライドの切り替えを行う操作機能の作り方を紹介したいと思います。
※IE8〜11、Safari（Mac）、Firefox、Chromeで動作確認しています。
スライダーはjQueryを使ったスライダーの作り方とその仕組みで作ったものを流用しますが、配布されているスライダープラグインでもパブリックメソッドが用意されているものであれば応用して同じことができます。
今回使用するスライダーのソース
ということで、スライダーのソースはこちら。画像は適当なものを使ってください。
動作を見たい方はプレビューしてください。
|
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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sliderでsliderをslideする</title> <style type="text/css"> .slider-container { margin-left: auto; margin-right: auto; width: 500px; position: relative; } .slider { width: 500px; height: 200px; overflow: hidden; position: relative; } .slider .slideSet { position: absolute; } .slider .slide { width: 500px; height: 200px; float: left; } .slider-prev, .slider-next { margin-top: -15px; padding: 0; background: none; border: none; position: absolute; top: 50%; font-size: 30px; line-height: 1; cursor: pointer; } .slider-prev { left: -40px; } .slider-next { right: -40px; } </style> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="jquery-1.11.3.min.js"></script> </head> <body> <div class="slider-container"> <div class="slider"> <div class="slideSet"> <div class="slide"><img src="image01.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image02.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image03.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image04.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image05.jpg" height="200" width="500" alt=""></div> </div> </div> <button class="slider-prev"><i class="fa fa-arrow-circle-left"></i></button> <button class="slider-next"><i class="fa fa-arrow-circle-right"></i></button> </div> <script> (function(){ var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 var slideNum = $('.slide').length; // .slideの数を取得して代入 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 var slideCurrent = 0; // 現在地を示す変数 // アニメーションを実行する独自関数 var sliding = function(){ // slideCurrentが0以下だったら if( slideCurrent < 0 ){ slideCurrent = slideNum - 1; // slideCurrentがslideNumを超えたら }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 slideCurrent = 0; } $('.slideSet').stop().animate({ left: slideCurrent * -slideWidth }); } // 前へボタンが押されたとき $('.slider-prev').click(function(){ slideCurrent--; sliding(); }); // 次へボタンが押されたとき $('.slider-next').click(function(){ slideCurrent++; sliding(); }); }()); </script> </body> </html> |
jQuery UI Sliderをダウンロードする
jQuery UIのページからVersionを1.11.4、UI CoreからCore・Widget・Mouse、WidgetからSliderを選択してダウンロードしてください。
jQuery UI Sliderを設置する
まずはダウンロードしたファイルの中に入っている、jquery-ui.min.cssとjquery-ui.min.jsをHTMLから読み込みます。
|
1 2 3 4 |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.min.css"> <script src="jquery-1.11.3.min.js"></script> <script src="jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> |
パスは自分の環境に合わせて変更してください。
次にdiv#sliderをdiv.slider-containerの下に配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="slider-container"> <div class="slider"> <div class="slideSet"> <div class="slide"><img src="image01.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image02.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image03.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image04.jpg" height="200" width="500" alt=""></div> <div class="slide"><img src="image05.jpg" height="200" width="500" alt=""></div> </div> </div> <button class="slider-prev"><i class="fa fa-arrow-circle-left"></i></button> <button class="slider-next"><i class="fa fa-arrow-circle-right"></i></button> </div> <div id="slider"></div> |
最後にJavaScriptでjQuery UI Sliderを実行します。
|
1 2 3 4 5 |
<script> // 略 $('#slider').slider(); </script> |
これでとりあえずjQuery UI Sliderが動作するようになりました。
さて、ここからが本題です。
このjQuery UI Sliderのツマミをドラッグして値が変化したときにその値に合わせてスライドが切り替わるようにします。
jQuery UI Sliderの最大値を指定する
まずは値がスライドの数以上にならないようオプションでmaxの値を指定します。
スライドの数は即時関数の中にある変数slideNumに代入されていますので、これを使います。
ただし、この変数slideNumはローカル変数になっているので、即時関数の外からは参照できません。
そのため
$('#slider').slider(); を即時関数の中に移動します。
また、スライドの数は0からカウントするため変数slideNumから1引いた値を指定します。
|
1 2 3 4 5 6 7 8 9 10 |
<script> (function(){ // 略 // jQuery UI Sliderの実行 $('#slider').slider({ max: slideNum - 1 }); }()); </script> |
これでjQuery UI Sliderの値がスライドの数以上にならなくなりました。
jQuery UI Sliderのツマミの移動とスライドの切り替えを同期する
jQuery UI Sliderのslideイベントを使うことで、ツマミが移動したタイミングで特定の処理を実行することができます。
また、イベントの引数から現在の値を取得することができますので、この値を変数slideCurrentに代入してやりsliding()を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> (function(){ // 変数 // jQuery UI Sliderの実行 $('#slider').slider({ max: slideNum - 1, slide: function(e, ui){ slideCurrent = ui.value; sliding(); } }); }()); </script> |
また、これだけではスライダーの矢印でスライドを切り替えたときにjQuery UI Sliderの値が変わらずツマミの位置も変わらないため、sliding()の中で値を指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> (function(){ // 略 var sliding = function(){ // slideCurrentが0以下だったら if( slideCurrent < 0 ){ slideCurrent = slideNum - 1; // slideCurrentがslideNumを超えたら }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 slideCurrent = 0; } $('.slideSet').stop().animate({ left: slideCurrent * -slideWidth }); $('#slider').slider('value', slideCurrent); } // 略 }()); </script> |
これでスライドの位置とツマミの位置が同期されました。
おまけ
応用するとjQuery UI Sliderの値とスライダーの位置を計算することでシームレスなスライドもできます。
|
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 |
<script> (function(){ var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 var slideNum = $('.slide').length; // .slideの数を取得して代入 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 var slideCurrent = 0; // 現在地を示す変数 // アニメーションを実行する独自関数 var sliding = function(){ // slideCurrentが0以下だったら if( slideCurrent < 0 ){ slideCurrent = slideNum - 1; // slideCurrentがslideNumを超えたら }else if( slideCurrent > slideNum - 1 ){ // slideCUrrent >= slideNumでも可 slideCurrent = 0; } $('.slideSet').stop().animate({ left: slideCurrent * -slideWidth }); $('#slider').slider('value', (slideCurrent * slideWidth) / ((slideNum - 1) * slideWidth) * 100); } // 前へボタンが押されたとき $('.slider-prev').click(function(){ slideCurrent--; sliding(); }); // 次へボタンが押されたとき $('.slider-next').click(function(){ slideCurrent++; sliding(); }); // jQuery UI Sliderの実行 $('#slider').slider({ slide: function(e, ui){ var left = (slideNum - 1) * slideWidth / 100 * ui.value; $('.slideSet').stop().css({ left: -left }); slideCurrent = Math.round(left / slideWidth); } }); }()); </script> |
jQuery UI Sliderの値は0〜100に対してスライドの位置（left）は0〜2000pxとなっているため、100のとき2000pxにならなければいけません。
こういう場合には百分率（％）を求めればうまく計算することができます。
例えば、最大値が2000pxとしたときに1500pxの割合を求める場合は「1500 / 2000 * 100」で75（％）となります。
この値をjQuery UI Sliderの値にします。
逆にjQuery UI Sliderの値が75としたときに、スライドの位置（left）を求める場合には「2000 / 100 * 75」で1500pxとなります。
こういった計算はアニメーションやUIを作るときに以外と使うので覚えておくといいです。
おわりに
ということで、jQuery UI Sliderを使ってスライダーをスライドさせる方法の紹介でした。
使う機会があるのかは不明ですがw
あと、この記事で公開しているコードは１ページに複数のスライダーを置くことを想定したものになっていないので注意してください。
ではでは ( ͡° ͜ʖ ͡° )ﾉｼ
