jQuery GR Slider

動作サンプル

    オプション等を見る grslider.cssjquery.grslider.js

    オプション

    • auto
      //自動再生

      true or false or 自動再生回数
      loop: falseのときは、最後の要素で停止し、他の要素を表示することで再度自動再生が始まります。
      自動再生回数は、最後の要素の表示回数です。手動で最後の要素を表示した場合にも数えられます。

    • changeTime
      //自動再生間隔
    • slideTime
      //スライド効果時間
    • loop
      //繰り返し
    • type
      //スライド形式
    • initNum
      //初期表示スライド番号
    • showNum
      //表示スライド数
    • moveAll
      //表示分まとめてスライド
    • slideEase
      //スライド効果
    • direction
      //スライド方向
    • paging
      //前後ボタン有無
    • nav
      //ナビ有無
    • changeClass
      //クラス変更

      Array('className', スライド番号[, スライド番号 ...])
      or
      Array('className', Array(除数, 余り))
      例：['blk', 1, 3]

    • flickable
      //フリック操作

      nofollowにすると、フリック時に要素が追従しなくなります。type: 'fade'の場合はtrueでも追従しません。
      ※type: 'flip'かつ表示スライド数が2以上の場合、cssのperspectiveによって各要素の見え方が変わります。

    • pauseOnHover

      //マウスオーバーで一時停止

      自動再生時にマウスオーバーで一時停止することができます。

    • loader
      //ローディング演出

      スライダー内に画像がある場合、それらの画像が読み込み終わった時点でスライダーになります。
      ローディング画面の動作は当サイトのトップページを御覧ください。

    • beforeSlide
      //スライド前の実行関数

      false or function(slider, current{idx:数値, $:jQueryオブジェクト}, next{idx：数値, $：jQueryオブジェクト}, deferred){}
      処理終了箇所に deferred.resolve(); を記述すると、同期処理ができます。
      ※初回表示時、リサイズ時は実行されません。
      関数ありサンプル　関数なしサンプル

    • afterSlide
      //スライド後の実行関数

      false or function(slider, current{idx:数値, $:jQueryオブジェクト}, deferred){}
      処理終了箇所に deferred.resolve(); を記述すると、同期処理ができます。
      関数ありサンプル　関数なしサンプル

    • 前後のスライドも表示

      旧「overflow」オプション。cssで調整可能です。
      overflowありサンプル　overflowなしサンプル

    • HTMLでのみ設定可能

      data-change-time="ミリ秒"
      スライダー内の要素に指定することで、自動再生間隔を個別に設定できます。
      ※showNumが2以上かつmoveAll: trueの場合は、それぞれの先頭要素に指定します。※ 要素数が6で、showNum: 2, moveAll: trueの場合、1番目、3番目、5番目に設定された値が参照されます。
      data-slide-time="ミリ秒"
      スライダー内の要素に指定することで、スライド効果時間を個別に設定できます。
      ※showNumが2以上かつmoveAll: trueの場合は、それぞれの先頭要素に指定します。※ 要素数が6で、showNum: 2, moveAll: trueの場合、1番目、3番目、5番目に設定された値が参照されます。
    サンプルを更新

    メソッド

    • slideTo
      指定番号にスライド

      $('.grSlider').grSlider('slideTo'[, スライド番号]);
      番号を省略した場合は、次にスライドします。

      実行する
    • play
      一時停止の解除

      $('.grSlider').grSlider('play');

      実行する
    • pause
      一時停止

      $('.grSlider').grSlider('pause');
      ※「Pause」の文字が表示されるのは、当デモページのみです。

      実行する
    • setOption
      オプションの変更

      $('.grSlider').grSlider('setOption'[, Object(options)]);
      引数が無い場合はデフォルトに戻します。
      ※各要素のdata-change-timeの設定は変更できません。
      【サンプルオプション】
      auto: false,
      loop: false,
      slideTime: 1000,
      showNum: 3,
      paging: true,
      nav: false

      実行する
    • destroy
      破棄

      $('.grSlider').grSlider('destroy');

      実行する
    • rebuild
      再構築

      $('.grSlider').grSlider('rebuild'[, Object(options)]);
      【サンプルオプション】
      paging: false

      実行する

    更新履歴

    • Version 2.4.5を公開。resize時の処理を修正。
    • Version 2.4.4を公開。オプション「changeClass」のバグを修正。
    • Version 2.4.3を公開。css微修正と、オプション「type: 'fade'」の動きなどを調整。
    • Version 2.4.2を公開。スライド要素が表示数より少ない場合の仕様変更と、バグを修正しました。
    • Version 2.4.1を公開。スライド要素が表示数より少ない場合のバグを修正しました。
    • Version 2.4.0を公開。メソッドを実装しました。オプション「overflow」を削除しました。
    • Version 2.3.2を公開。オプション「pauseOnHover」のバグを修正しました。
    • Version 2.3.1を公開。自動再生時にマウスオーバーで一時停止が可能になりました。自動再生のバグを修正しました。
    • Version 2.3.0を公開。自動再生回数の指定、各要素ごとの自動再生間隔の指定、スライド前後での関数実行が可能になりました。フリック操作に'nofollow'を追加しました。
    • Version 2.2.0を公開。基本動作をcss3に修正しました。ブラウザ未対応時はjQueryで動作します。cssも微修正しました。
    • Version 2.1.1を公開。ローディング画面の円がIE11でも表示されるように修正しました。
    • Version 2.1.0を公開。ローディング画面機能を追加しました。
    • Version 2.0.0を公開。