2014/03/25
レスポンシブ＆タッチ対応！スライダーjQueryプラグイン「SlidesJS」
レスポンシブサイトが増えてきて、レスポンシブとタッチの両方に対応していて、安定して動作するようなスライダーの必要性も高くなっています。
またそれに加えて、お客様からの難題に答えられるような柔軟性のあるスライダーとなると、なかなかjQueryプラグインで見つけるのは大変です。
今回そんな中探していて、シンプルですがとても使いやすいスライダーの、「SlidesJS」というjQueryプラグインを見つけましたので、ご紹介いたします。
↓「SlidesJS」のサイト
SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3
コチラの特長としては、
エフェクトは普通のスライドとフェイドのみと少ないものの、
レスポンシブに強いということが挙げられると思います。
画面の幅に応じてスライダーの大きさを自動調整してくれるスライダーは他にもいくつかありますが、
このSlidesJSでは、基準となるスライダーの縦横の大きさをピクセルで指定し、
その基準に従って縦横の大きさを画面の幅に応じて調整することができます。
スマホなどで、スライダーの画像を、PC向けとは異なる縦横比の画像に切り替える処理をしている場合、通常の自動調整ではこの切り替えを認識できずに表示がおかしくなってしまいます。
しかし、このSlidesJSの画像サイズの指定オプションを使うと、
ある幅以上では幅960px×高さ350pxを基準に、
ある幅未満では幅640px×高さ533pxを基準にするといった場合わけを行うことができるので、
よりレスポンシブサイトに柔軟に対応することができます。
↓DEMO
使い方
使い方もシンプルです。
まずサイトからjquery.slides.min.jsをダウンロードして、HTMLで読み込みます。
HTML
<head>内
|
1 2 3 | <!-- JSの読み込み --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.slides.min.js"></script> |
<body>内
|
1 2 3 4 5 | <ul class="slider"> <li><img src="images/image01.jpg" alt="image"></li> <li><img src="images/image02.jpg" alt="image"></li> <li><img src="images/image03.jpg" alt="image"></li> </ul> |
JavaScript
|
1 2 3 | $(function(){ $(".slider").slidesjs(); }); |
何も設定しない場合は、コチラのコードで実装完了です。
オプションも充実しています
|
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 | $(function(){ $(".slider").slidesjs({ //基準となる幅と高さの指定(px) width: 700, height: 393, start: 3, //最初に表示するスライドの番号 //ナビゲーションの設定 navigation: { active: true, //trueで表示、falseで非表示 effect: "slide" //ナビゲーションを押したときのエフェクトを"slide", "fade"から選択 }, //ページネーションの設定 pagination: { active: true, //trueで表示、falseで非表示 effect: "slide" //ページネーションを選択したときのエフェクトを"slide", "fade"から選択 }, //自動再生の設定 play: { active: true, //trueで再生、停止ボタンを表示、falseで非表示 effect: "slide", //自動再生のときのエフェクトを"slide", "fade"から選択 interval: 5000, //再生間隔をミリ秒で指定 auto: false, //trueで自動再生を有効に swap: true, //falseで再生、停止ボタンを両方常に表示、trueで切り替え pauseOnHover: false, //trueでマウスホバー時に一時停止 restartDelay: 2500 //最初に戻るときに間隔を遅らせる場合、ミリ秒で指定 }, //エフェクトの設定 effect: { //スライドの設定 slide: { speed: 200 //アニメーションスピードをミリ秒で設定 }, //フェイドの設定 fade: { speed: 300, //アニメーションスピードをミリ秒で設定 crossfade: true //falseでクロスフェードを無効にする } }, //コールバックの設定 callback: { //スライダーが読み込み終わったら実行 loaded: function(number) { //numberには表示しているスライダーの番号が返される //実行する関数 }, //スライド開始時に実行 start: function(number) { //実行する関数 }, //スライド完了時に実行 complete: function(number) { //実行する関数 } } }); }); |
ナビゲーション、ページネーション、自動再生それぞれでエフェクトを指定できるのも魅力だと感じました。
Author Profile
SHARE
